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
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…
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With