Youtube Lazy load embed frame code for website

Youtube Lazy load embed frame code for your website

Here's a quick overview of how to lazy load a YouTube video on your website:

Styling:

Next, you'll apply some simple styles to make the video area seem great. This includes adjusting the size and background color so that it looks like a video player even before it loads.

.embed-youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid black;
    border-radius: 10px;
}
.embed-youtube img {
    width: 100%;
    top: -16.84%;
    left: 0;
    opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
    width: 50px;
    height: 50px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 50px;
}
.embed-youtube .embed-youtube-play:before {
    content: "";
    border-style: solid;
    border-width: 12px 0 12px 20.0px;
    border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
    cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
    position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.embed-youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.embed-youtube .embed-youtube-play:hover {
    background-color: #f00;
}

HTML Setup:

Begin by defining an area for the video with a div. This div includes a custom attribute that contains the YouTube video ID. You also include a message within that encourages visitors to click to see the video.

<!-- 1. YouTube Video Wrapper Container -->
<div class="embed-youtube" data-video-id="youtube_video_id"> 
    <!-- 2. The preview button that will contain the Play icon -->
    <div class="embed-youtube-play"></div>
</div>

Usage:

Simply replace the placeholder with the YouTube_video_ID you want to display.

JavaScript Functionality:

Finally, you add JavaScript to make it interactive. When the user clicks on the video area, the script replaces the placeholder message with an actual YouTube iframe that plays the video.

(function(){
    let YouTubeContainers = document.querySelectorAll(".embed-youtube");

    // Iterate over every YouTube container you may have
    for (let i = 0; i < YouTubeContainers.length; i++) {
        let container = YouTubeContainers[i];
        let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg"; 

        // Load the Thumbnail Image asynchronously
        let image = new Image();
        image.src = imageSource;
        image.addEventListener("load", function() {
            container.appendChild(image);
        });

        // When the user clicks on the container, load the embedded YouTube video
        container.addEventListener("click", function() {
            let iframe = document.createElement( "iframe" );

            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "");
            iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
            // Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it 
            iframe.setAttribute("src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?mode=opaque&amp;rel=0&amp;autohide=1&amp;showinfo=0&amp;wmode=transparent");

            // Clear Thumbnail and load the YouTube iframe
            this.innerHTML = "";
            this.appendChild( iframe );
        });
    }
})();

importance of lazyload youtube embed

This strategy waits to load the video until the visitor expresses interest by clicking, which can help your webpage load faster.