Welcome to the world of StackOverflow!
Dealing with the Youtube Player may present some challenges, however, it is manageable if you adhere to strict guidelines.
One common mistake is trying to append onYouTubeIframeAPIReady() anywhere other than the window object. It is crucial to initiate this function within the window as shown below:
window.onYouTubeIframeAPIReady = () => {
console.log("onYouTubeIframeAPIReady")
};
If you cannot place this function inside a method, an alternative approach is to have that function trigger a method within your Vue Object.
var vueApp = new Vue({
...
methods: {
initYoutube() {}
}
})
window.onYouTubeIframeAPIReady = () => {
console.log("onYouTubeIframeAPIReady")
vueApp.initYoutube()
};
By using this clever technique, you can utilize the Youtube API seamlessly:
<div id="app">
<div id="player"></div>
</div>
var vueApp = new Vue({
el: "#app",
data: function () {
return {
player: null
};
},
methods: {
initYoutube() {
const _ = this;
console.log("initYoutube");
this.player = new YT.Player("player", {
width: 600,
height: 400,
videoId: "Xa0Q0J5tOP0",
events: {
onReady: _.onPlayerReady,
onStateChange: _.onPlayerStateChange
}
});
},
onPlayerReady(evt) {
console.log("Player ready");
evt.target.playVideo();
},
onPlayerStateChange(evt) {
console.log("Player state changed", evt);
}
}
});
onYouTubeIframeAPIReady = () => {
console.log("onYouTubeIframeAPIReady");
vueApp.initYoutube();
};
Check out this functional example in CodePen
(Apologies for Veutify, my VueJs CodePen template sets everything up automatically. Simply use it without the vuetify: new Vuetify(), line) :)