How to Lazy Load Video YouTube Embed in Blogger?

 

Have you ever thought about how important it is to implement lazy loading on YouTube videos embedded in website/blog content? Yes, you are right, the application of lazy loading on youtube videos embedded on the website is certainly very important, because it will keep the optimation website's performance.

Therefore this time I will share the lazy load youtube video script to blogger friends for free. This is the best script for lazy loading youtube videos and has been proven to be able to maintain optimal website/blog performance even though there are many embedded youtube videos.

Don't believe it yet? Take a look at the comparison of the results of the following analysis before and after using the lazy load youtube video script.

I've done 3 website performance tests.

1. Test website performance without embed youtube video.

2. Test website performance with embed youtube video, but without lazy load script

3. Test website performance with embed youtube video and lazy load script.

How are you interested in using lazy load youtube videos? If so, follow the steps on how to install the lazy load youtube video script below.

Step 1. Go to your blogger admin dashboard. Select "Post" menu >> Fill the post title >> select "HTML View". And Copy this HTML Code :

<div class="youtube-iframe-container">
    <iframe class="youtube-video iframe-video cordial-lazyload" 
        data-src="https://www.youtube.com/embed/xxxxxx"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>

Change red text color with your video embed id. and Publish.

Step 2. In your blogger admin dashboard. Select "Theme" menu >> select down arrow beside "Customize" then select  "Edit HTML".

Step 3. In the box press "CTRL + F" to search type "</skin>" . Copy code bellow before "</skin>

    .youtube-iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .iframe-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

and Save theme.

Step 4. In your blogger admin dashboard. Select "Layout" menu >>  in the navbar select "Add Widget" then select "HTML/Javascript". And copy javascript code below :

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        if ("IntersectionObserver" in window) {
            var iframes = document.querySelectorAll("iframe.cordial-lazyload");
            var iframeObserver = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting && entry.target.src.length == 0) {                    
                        entry.target.src = entry.target.dataset.src;
                        iframeObserver.unobserve(entry.target);
                    }
                });
            });

            iframes.forEach(function (iframe) {
                iframeObserver.observe(iframe);
            });
        } else {
            var iframes = document.querySelector('iframe.cordial-lazyload');

            for (var i = 0; i < iframes.length; i++) {
                if (lazyVids[i].getAttribute('data-src')) {
                    lazyVids[i].setAttribute('src', lazyVids[i].getAttribute('data-src'));
                }
            }
        }
    })
</script>

Then Save the widget. 

And Finish, now you can test your blog/web performance with ligthouse.