title: Youtube iframe api not triggering onYouTubeIframeAPIReady
body: <p>I've been battling with the youtube iframe api for quite some time now. Somehow the method <code>onYouTubeIframeAPIReady</code> is not always triggered. </p>
  
  <p>From the symptoms it seems a loading problem. No errors are shown in the inspector.</p>
  
  <p>Here is my code:</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="player"&gt;&lt;/div&gt;
            &lt;script&gt;
              videoId = 'someVideoId';
              var tag = document.createElement('script');
              tag.src = "//www.youtube.com/iframe_api";
              var firstScriptTag = document.getElementsByTagName('script')[0];
              firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            &lt;/script&gt;
  </code></pre>
  
  <h2>JS</h2>
  
  <p>(called at the end of the page. I tried to place the code right after the above script and the result was the same.)</p>
  
  <pre><code>var isReady = false
    , player
    , poster
    , video;
  
  $(function () {
  $('.js-play').click(function (e) {
      e.preventDefault();
      interval = setInterval(videoLoaded, 100);
    });
  });
  function onYouTubeIframeAPIReady() {
    console.log(videoId)
    player = new YT.Player('player', {
      height: '445',
      width: '810',
      videoId: videoId,
      events: {
        'onReady': onPlayerReady//,
        //'onStateChange': onPlayerStateChange
      }
    });
  }
  
  function onPlayerReady(event) {
    isReady = true;
    console.log("youtube says play")
  }
  
  function videoLoaded (){
    if (isReady) {
        console.log("ready and play")
        poster.hide();
        video.show();
  
        $('body').trigger('fluidvideos');
  
        player.playVideo();
        clearInterval(interval);
    } 
  }
  </code></pre>
  
  <p>The problem is that sometimes nothing gets printed by the <code>console.log</code> and nothing happens.</p>
  
  <p>On mobile phones this happens all the time. Any ideas?</p>