Я уже много лет сражаюсь с youtube iframe api. Почему-то метод onYouTubeIframeAPIReady
не всегда срабатывает.
От симптомов кажется проблемой загрузки. В инспекторе не отображаются ошибки.
Вот мой код:
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
(вызывается в конце страницы. Я попытался поместить код сразу после выше script, и результат был тем же.)
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);
}
}
Проблема заключается в том, что иногда ничего не печатается console.log
, и ничего не происходит.
На мобильных телефонах это происходит постоянно. Любые идеи?