YouTube IFrame API doesn't always load?

Question

I've seen lots of similar questions to this, but I believe this is different. When I try to define onYouTubeIframeAPIReady in the global scope, the function only gets called about half the times I load the page (if I keep refreshing, sometimes I'll see the console message, and sometimes it isn't there). It's confusing to me that this only happens sometimes, and I don't call onYouTubeIframeAPIReady anywhere else in my code.

Problem areas I've checked:

• I'm running it on Github Pages (so it's not local)
• The function is defined in the global scope

My code is below:

window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { // TODO: Sometimes this doesn't work
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
}

Answer 1

This sounds suspiciously like you're loading the API library via a src attribute on a in your DOM tag rather than the suggested way of dynamically adding it to the DOM after the page has loaded, or that you're loading the library before the DOM element that the player object is targeting has been created ... because the onYouTubeIframeAPIReady function is called as soon as the library loads itself, the possibility always exists that, if you try loading the library via a src attribute on a tag that it'll load and call the function before your function is actually registered or before the (in this case) 'player' element exists in the DOM. Working code would look something like this (placed near the bottom of your page ... definitely below the element you're trying to create the iframe in place of):

<div id="player"></div>
<script>
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 var player;
 window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { 
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
 };
</script>

If I'm wrong, and that is how you're loading the library, then you'll want to monitor in Chrome Dev Tools or firebug to see when the library is getting loaded in relation to when the DOM element exists.

Answer 2

You forgot your semicolon at the end:

window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { // TODO: Sometimes this doesn't work
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
};