I created a new page especially to test the API. When copy pasting their example with
<div id="player"></div>
and
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Everything works.
Now when I remove the <div id="player"></div> and instead replace it with
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe>
It no longer works. It never goes in the onPlayerReady or onPlayerStateChange. The weird thing is it was working last night and today it isn't. I have attached my full code in case it may help.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
alert('test');
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
YT.Player:s for the same iframe, and apparently only the firstYT.Playerwill actually work while the others just fail silently. They don't fire any events and they lack all theplayVideo(),pauseVideo()etc methods. – Constitutiveiframe, and I've created aYT.Playerinstance for each video. If the page loads normally, all of them constructs the instances properly and fire the events (onReady,onStateChange), but if during the loading something stops the JS execution for some reason (a breakpoint for example), only the first instance is constructed properly and fires the events, the others just became a kind ofYT.Playerinstances, but without the methods (playVideo()...) and not firing events – Negotiable