jribeiro jribeiro - 4 months ago 145
Javascript Question

Youtube iframe api not triggering onYouTubeIframeAPIReady

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?

bcm bcm
Answer

It is not a timeout issue, and you should not need to fire this function manually.

Make sure your onYouTubeIframeAPIReady function is available at the global level, not nested (hidden away) within another function.