Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.

Lazy Load YouTube And Other Videos In Website

30th August 2020 3 mins read

Share On

In this article lets learn simple steps to lazy load YouTube videos or any other videos. Once your website loads and if contains any YouTube or any other videos then the website loads longer than usual which has a huge impact on your users.

Solution

We will include the video thumbnail and on click of the thumbnail we will load the video. This drastically improves website loading and retaining most of your users

We will cover the following

HTML
CSS
Javascript
Any YouTube Video Thumbnail Code

NOTE: Code available at GitHub Lazy Load YouTube And Other Videos In Website

Step 1 - HTML

First let's add the HTML template with YouTube video thumbnail.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Load YouTube Videos</title>
    <!-- Video loading CSS style -->
    <link rel="stylesheet" href="video-loader.css">
</head>
<body>
    <div class="container">
        <!-- Adding original source in data-src -->
        <div class="video-wrapper" data-src="https://www.youtube.com/embed/R5ntdxOZ70E">
            <!-- Loading video thumbnail -->
            <img class="video-image" src="https://img.youtube.com/vi/R5ntdxOZ70E/hqdefault.jpg" />
        </div>
    </div>

    <!-- Video loading JS script -->
    <script src="video-loader.js"></script>
</body>
</html>

Step 2 - CSS

Responsive CSS to load youtube videos.

video-loader.css

.container {
    width: 480px;
    margin: 0 auto;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 100%;
    overflow: hidden;
}
.video-image {
    cursor: pointer;
}
.video-play-btn {
    position: absolute;
    
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Step 3 - Javascript

We are looping through all the video wrapper and listening for the click event to occur. When the click event happens we will load the parent set data-src actual video source.

video-loader.js

function loadVideo(e){
    var parent = this.parentNode;
    var dataSrc = parent.getAttribute('data-src');
    parent.innerHTML = '<iframe class="video" src="'+ dataSrc +'" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
}
var videoImage = document.querySelectorAll('.video-wrapper .video-image');
for(var i = 0; i < videoImage.length; i++){
    videoImage[i].addEventListener('click', loadVideo);
}

Step 4 - Any YouTube Video Thumbnail Code

If you need any YouTube video thumbnail then you can use the following URLs. Make sure to just replace your YouTube video-id.

Default image thumbnail

https://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

High quality thumbnail

https://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

Medium quality thumbnail

https://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

Conclusion

NOTE: Code available at GitHub Lazy Load YouTube And Other Videos In Website

I hope this article helped you. Please share it with your friends.

Writing Clean Code In PHP

Foreign Key Migrations Simplified In Laravel 7.x

Global Data In All Laravel Blade Pages

Select2 Dropdown

Observers In Laravel

Relationship Table Data With Route Model Binding In Laravel

Getting Started With AMP (Accelerated Mobile Pages)

Setup AMP (Accelerated Mobile Pages) In PHP Laravel

Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages

Add Google ADS In AMP (Accelerated Mobile Pages) Website

AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing