Menu
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>
277
Per issue 5670:
A quick fix is to add in the
origin=http://www.example.com(replace with your servers full domain; make sure you usehttp://orhttps://as appropriate for your site) to thesrc=attribute of the player's iframe element. Please make sure that theorigin=attribute's value exactly matches the host domain and URL scheme. E.g.<iframe type="text/html" width="640" height="480" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com" frameborder="0"> </iframe>
134
A fix was finally posted: https://code.google.com/p/gdata-issues/issues/detail?id=5670#c6
Here is a direct quote of the answer at the link above:
A quick fix is to add in the origin=http://www.example.com (replace with your servers full domain; make sure you use http:// or https:// as appropriate for your site) to the src= attribute of the player's iframe element. Please make sure that the origin= attribute's value exactly matches the host domain and URL scheme. E.g.
<iframe type="text/html" width="640" height="480" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com" frameborder="0"> </iframe>I'm currently working with the engineering team to figure out whether origin= is going to be required moving forward or whether this new requirement can be reverted, but this is the immediate fix. Apologies for the breakage and lack of advanced communication in the meantime.
If you use the YT.Player() constructor to create the iframe element for you then this isn't be an issue—it's a bit of an edge case for developers who are explicitly including the iframe element as part of their page's HTML.
I implemented the fix above, and it worked for me.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
