YouTube API does not appear to load in Firefox, IFrame gets loaded , but the onPlayerReady event never fires?

Question

I am loading the YouTube player API as follows:

      var player;
  function onYouTubeIframeAPIReady() {
console.log("iframe ready");
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }


function onPlayerReady(){
console.log("player ready");
}

On chrome both the IFrame ready and the player ready events get fired, but on Firefox, only the iframe ready gets fired, and I never see the onPlayerReady event fire.

I was wondering what the possible causes of this issue are, and whether or not there is a workaround. I am unable to access player functions such as loadPlaylist due to this issue.

Thanks

Answer 1

In my case, the answer referenced by Ibrahim was not the issue I was facing. That's an older bug which looks to be resolved now anyways.

My video was loading in a modal window which starts out with display:none on it. This was preventing Firefox from fully processing the API and, and subsequently the onReady event wasn't firing. Safari and Chrome were behaving as expected and there were no errors to speak of so this left me scratching my head for way too long.

I changed display:none to visibility:hidden and the event fired and all was well with the world.

I was tipped off to this by this answer.

EDIT:

Internet Explorer 10 and 11 were having the same issue even after the fix mentioned above. The first comment on this post led me to simply use positioning (ie. left:-150%) to hide and show my modal, and not visibility or display attributes. Oddly enough, disabling Flash also fixed this but that's obviously not a workable solution…

Answer 2

Well there is also a problem with YT flash player. But when you use HTML5 player version all YT player var and all API methods are working just fine:

var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      playerVars: {
        html5: 1
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }