vue.js - Run multiple YouTube video dynamically using YouTube API

Question

Case

I am implementing youtube video in VUE JS using youtube API, Video is playing in the modal, when the user clicks on the next and previous button then new youtube video will be played in modal

Problem

I want to reinitialize the youtube player with a new ID dynamically and destroy the old youtube instance

Code

  data () {
    player: ''
  },

  onYouTubeIframeAPIReady (youtubeVideoId) {
  const _ = this
  this.player = new window.YT.Player('player', {
    playerVars: { autoplay: 1, controls: 1 },
    videoId: youtubeVideoId,   <<<<<<<------------------------ everytime new id passed then 
    youtube player must reinitialize
    
    events: {
      onReady: _.onPlayerReady,
      onStateChange: _.onPlayerStateChange
    }
  })
},
onPlayerReady (evt) {
  console.log('Player ready')
  evt.target.playVideo()
},
onPlayerStateChange (evt) {
  // this.player.loadVideoById(youtubeVideoId)
  // this.player.stopVideo()
  // evt.target.destroy()
  console.log('Player state changed', evt)
},
loadNext () {
     //some id will be passed
     this.onYouTubeIframeAPIReady(nextId)
},
loadPreviouse () {
     //some id will be passed
    this.onYouTubeIframeAPIReady(previousId)
}

You can see in the image loadnext and loadprevious pass new ID to this function onYouTubeIframeAPIReady to play the new video

I could not found any dynamic solution. Another possible solution is to embed the new youtube iframe code again and again which works fine. But in this solution youtube video not autoplay with sound

Answer 1

等待大神答复