Youtube Api Not Ready Sometimes
I'm trying to include a youtube vid using their API. However, sometimes (really random. Most times it works) I get an error when I click my play button: Cannot read property 'playV
Solution 1:
You need to call events to start the player. And you can't play video before its loading. that't why you are getting undefined error. i have added events and functions check now. Better example can be found here enter link description here
var player;
functiononYouTubeIframeAPIReady() {
player = newYT.Player('video-intro', {
width: 100,
height: 100,
videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short)playerVars: {
color: 'white',
controls: 0,
showinfo: 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
functiononPlayerReady(event) {
event.target.playVideo();
}
var done = false;
functiononPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
functionstopVideo() {
player.stopVideo();
}
$(document).ready(function() {
$('#play-intro').click(function() {
onYouTubeIframeAPIReady();
$('#video-intro').addClass('showvid');
});
});#video-intro {
display: none;
&.showvid {
display: block;
}
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><head><scriptsrc="https://www.youtube.com/iframe_api"></script></head><body><divid="video-intro"></div><aid="play-intro">Play</a></body>Solution 2:
Unfortunately it is not working in SO Snippet. Try to show the element first (Your CSS is not working) then call player.playVideo() otherwise it will give error as shown in your question.
Use the below CSS to show your Iframe,
#video-intro {
display: none;
}
#video-intro.showvid {
display: block !important;
}
HTML:
<divid="video-intro"></div><aid="play-intro">Play</a><scriptsrc="https://www.youtube.com/iframe_api"></script><script>var player;
functiononYouTubeIframeAPIReady() {
player = newYT.Player('video-intro', {
width: 100,
height: 100,
videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short)playerVars: {
color: 'white',
controls: 0,
showinfo: 0
}
});
}
document.getElementById("play-intro").addEventListener("click", function() {
document.getElementById('video-intro').className = 'showvid';
player.playVideo();
});
</script>
Post a Comment for "Youtube Api Not Ready Sometimes"