Youtube Iframe: onYouTubePlayerAPIReady() not called

Question

I have a page with an iframe which load a youtube video (the src of iframe is modified in runtime). I based on code by Rob W provided in different answers on this topic

<iframe id="browser" class="browser" scrolling="no" name="navigation"  
src="http://www.youtube.com/embed/nOEw9iiopwI?enablejsapi=1" application="youtube" style="display:  
inline;"></iframe>

Then, when iframe is loaded this code is executed:

$('.browser').load(function() {
dispose_ytplayer();
});

the called function dispose_ytplayer() is:

function dispose_ytplayer() {
    (function(){
    var s = document.createElement("script");
    s.src = "http://www.youtube.com/player_api";
    var before = document.getElementsByTagName("script")[0];
    before.parentNode.insertBefore(s, before);
     })();

    alert('called yt_dispose');

    var ytIframeplayer;

    function onYouTubePlayerAPIReady() {
        alert('called onYouTubePlayerAPIReady');
        ytIframeplayer = new YT.Player('browser', {
             events: {
                "onStateChange": stopCycle
             }
        });
    }
}

but the second alert ("called onYouTubePlayerAPIReady") is never called, and my chrome console.log shows this error message from www-embed_core_module-vflNmuGQq.js:26 :

Unsafe JavaScript attempt to access frame with URL http://mysite.com from frame with URL http://www.youtube.com/embed/nOEw9iiopwI?enablejsapi=1. Domains, protocols and ports must match.

Any ideas?

Solution 1

onYouTubePlayerAPIReady should be on the window object.

try:

window.onYouTubePlayerAPIReady = function() {
        alert('called onYouTubePlayerAPIReady');
        ytIframeplayer = new YT.Player('browser', {
             events: {
                "onStateChange": stopCycle
             }
    });
}

Solution 2

It seems like you're not closing the functions off correctly.

The last } is closing off onYouTubePlayerAPIReady(), not dispose_ytplayer().

Fixed code:

function dispose_ytplayer() {
    (function(){
        var s = document.createElement("script");
        s.src = "http://www.youtube.com/player_api";
        var before = document.getElementsByTagName("script")[0];
        before.parentNode.insertBefore(s, before);
    })();

    alert('called yt_dispose');

    var ytIframeplayer;

    function onYouTubePlayerAPIReady() {
        alert('called onYouTubePlayerAPIReady');
        ytIframeplayer = new YT.Player('browser', {
            events: {
                "onStateChange": stopCycle
            }
        });
    }
}

Comments

[jenjis]

thanks for quick response, but the original code is correct, i made a mistake with cut/copy, sorry :)

[crevulus]

saved me after a lot of searching, even after all these years. YT should really add a hint to this on their docs.