title: YouTube API onPlayerReady not firing
body: <p>I created a new page especially to test the API. When copy pasting their example with </p>
  
  <pre><code>&lt;div id="player"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code> var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }
  </code></pre>
  
  <p>Everything works.</p>
  
  <p>Now when I remove the <code>&lt;div id="player"&gt;&lt;/div&gt;</code> and instead replace it with </p>
  
  <pre><code> &lt;iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>It no longer works. It never goes in the <strong>onPlayerReady</strong> or <strong>onPlayerStateChange</strong>. 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.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;!-- 1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. --&gt;
      &lt;iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"&gt;&lt;/iframe&gt;
  
  
      &lt;script&gt;
        // 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 &lt;iframe&gt; (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 &amp;&amp; !done) {
            setTimeout(stopVideo, 6000);
            done = true;
          }
        }
        function stopVideo() {
          player.stopVideo();
        }
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>