window.videoApiLoaded = [];
window.videoApiLoaded.youtube = false;
function loadYoutubeVideo(videoId) {
window.onYouTubeIframeAPIReady = function() { document.dispatchEvent(new CustomEvent('onYouTubeIframeAPIReady', {})) };
if(window.videoApiLoaded.youtube == false) {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.videoApiLoaded.youtube = true;
}
var player;
document.addEventListener('onYouTubeIframeAPIReady', function (e) {
player = new YT.Player('player', {
height: '400',
width: '600',
videoId: videoId,
events: {
'onStateChange': onYtStateChange
}
});
}, false);
}
Ленивую загрузку реализовать довольно просто.
<iframe id="player1" class="youtube_player" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/_k9TlsI102g?controls=0&disable=1&modestbranding=1&rel=0&showinfo=0&enablejsapi=1&widgetid=1"></iframe>
undefined
function onYouTubePlayerAPIReady() {
onYouTubePlayerAPIReady.ready = true;
}
if (onYouTubePlayerAPIReady.ready)
playerInfo.id - это id='player1'
<div id='player1'...
Во первых я так понял, запуск функции onYouTubePlayerAPIReady происходит сразу при загрузке скрипта https://www.youtube.com/player_api. Т.е. в моем случае, когда клиент дойдет до видео и кликнет на него, скрипт точно загрузится. Размер API, тем более всего 923 байта.
Во вторых декоратор это тоже не мой случай, потому как onYouTubePlayerAPIReady вызывается 1 раз при загрузке API, а мне нужно много раз и только при клике по видео.