title: Youtube iFrame API 'YT is undefined'
body: <p>I'm trying to put this code in an module function:</p>
  
  <pre><code>$(document).ready(function()
      {
          VIDEO.onYouTubeIframeAPIReady();
  }
  
  
          var VIDEO = (function (my, $){
  var tag = document.createElement('script');
  var onPlayerStateChange;
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
    var player;
  
  
     my.onYouTubeIframeAPIReady =function() {
      player = new YT.Player('player', {
        height: '490',
        width: '880',
        videoId: SONG.getArtistId(),
        playerVars: { controls:1, showinfo: 0, rel: 0, showsearch: 0, iv_load_policy: 3 },
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange,
          'onError': catchError
        }
      });
    }
  
    function onPlayerReady(event) {
  
  
    if(typeof(SONG.getArtistId()) == undefined)
    {
      console.log("undefineeeed"); 
    } 
  
  
      event.target.playVideo();   
    }
  
    var done = false;
    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING &amp;&amp; !done) {
        // setTimeout(stopVideo, 6000);
        done = true;
      }
      if(event.data == YT.PlayerState.ENDED)
      {
        location.reload();
      }
    }
  
    function catchError(event)
    {
      if(event.data == 100) console.log("De video bestaat niet meer");
    }
  
    function stopVideo() {
      player.stopVideo();
    }
  
    return my;
  
  }(VIDEO || {}, jQuery));
  </code></pre>
  
  <p>The problem is: even it's self-executing, nothing happens and the iFrame is not shown.
  I'm trying to do this because it's part of an assignment. We have to work in modules.</p>