I've been battling with the youtube iframe api for quite some time now. Somehow the method onYouTubeIframeAPIReady is not always triggered.

From the symptoms it seems a loading problem. No errors are shown in the inspector.

Here is my code:

HTML

<div id=player></div>

          <script>

            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);

          </script>

JS

(called at the end of the page. I tried to place the code right after the above script and the result was the same.)

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);

  } 

}

The problem is that sometimes nothing gets printed by the console.log and nothing happens.

On mobile phones this happens all the time. Any ideas?