let lazyVideoObserver = new IntersectionObserver(function (
entries,
observer
) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
let lazyVideo = entry.target;
var source =
"https://img.youtube.com/vi/" +
lazyVideo.dataset.embed +
"/sddefault.jpg";

// add thumbnail

var image = new Image();
image.src = source;
image.alt= 'video';
image.addEventListener( "load", function() {
lazyVideo.appendChild( image );
}( lazyVideo ) );

lazyVideo.addEventListener( "click", function() {

var iframe = document.createElement( "iframe" );
iframe.setAttribute( "allow", "autoplay;encrypted-media" );
iframe.setAttribute( "allowfullscreen", "" );
iframe.setAttribute( "frameborder", "0" );
iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?controls=1&showinfo=0&autoplay=1" );

this.innerHTML = "";
this.appendChild( iframe );
} );


lazyVideo.classList.remove("lazy-loaded-video");
lazyVideoObserver.unobserve(lazyVideo);
}
});
});
/** Now observe all the non-loaded images using the observer we have setup above **/
lazyVideos.forEach(function (lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
</script>
</body>
</html>