lgick,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.youtube-video-lazy {
width: 480px;
height: 320px;
position: relative;
top: 0px;
left: 0px;
border: none;
}
iframe.youtube-video-lazy {
transform: scale(0.9);
opacity: 0;
transition: transform .5s, opacity 1.5s;
}
iframe.youtube-video-lazy.ready {
opacity: 1;
transform: scale(1);
}
.youtube-video-lazy>img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border: none;
}
.youtube-video-lazy>button {
border: none;
background: transparent;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
p {
height: 1000px;
}
</style>
</head>
<body>
<p></p>
<div class="youtube-video-lazy" data-video="5qap5aO4i9A">
<img src="" alt="video">
<button>
<svg width="68" height="48" viewBox="0 0 68 48">
<path class="video-play-shape" style="fill: #212121; fill-opacity: 0.8;" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z">
</path>
<path class="video-play-icon" style="fill: #ffffff;" d="M 45,24 27,14 27,34"></path>
</svg>
</button>
</div>
<p></p>
<div class="youtube-video-lazy" data-video="xwmDe0OhhPs">
<img src="" alt="video">
<button>
<svg width="68" height="48" viewBox="0 0 68 48">
<path class="video-play-shape" style="fill: #212121; fill-opacity: 0.8;" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z">
</path>
<path class="video-play-icon" style="fill: #ffffff;" d="M 45,24 27,14 27,34"></path>
</svg>
</button>
</div>
<p></p>
<script>
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
let lazyYoutube = divs =>
divs.forEach(el => {
if (el.intersectionRatio > 0.8) {
let div = el.target;
observer.unobserve(div);
div.visibleYoutubeElem()
}
});
let observer = new IntersectionObserver(lazyYoutube, {
rootMargin: "0px",
threshold: [.8]
});
let youtube = document.querySelectorAll('.youtube-video-lazy');
youtube.forEach(div => {
let videoId = div.dataset.video;
let img = div.querySelector('img');
let youtubeImgSrc = `https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`;
img.src = youtubeImgSrc;
observer.observe(div);
const onPlayerReady = function(q) {
q.target.h.classList.add('ready')
}
div.visibleYoutubeElem = _ => {
new YT.Player(div, {
height: '320',
width: '480',
videoId,
events: {
'onReady': onPlayerReady
}
});
}
})
}
</script>
</body>
</html>