How to Lazy load embedded YouTube videos in Blogger?

ByAbhishek padhi Updated on

 Do you want to lazy load embedded YouTube videos in Blogger? If yes, then this article is for you. 

Here, I will share how you can delay the loading of YouTube-embedded videos on your website to boost the loading speed. You don’t need to add any Javascript code to your website. You just need to modify the HTML code a little bit for iframes. 

Lazy load Embeded YouTube video in blogger

What is wrong with the default YouTube iframe?

The default YouTube iframe that we embedded in our website slows down the loading speed by loading a lot of resources in the front end. 

An embedded iframe of YouTube videos can take about 500-700 KB contributing around 50-60 percent of the total page size. So, how hard you optimize your images, CSS, and javascript loading, acts as a bottleneck in the speed performance. 

It also blocks the main thread and when you check the page URL in the page speed insight you will see an error like this. 

Youttube iframe block main thread (page speed insight report)

It also triggers errors in the page speed insight report as mentioned below. 

  • Reduce the impact of third-party code
  • Some third-party resources can be lazy-loaded with a facade
  • Does not use passive listeners to improve scrolling performance
  • Reduce JavaScript execution time
  • Remove unused JavaScript

It also increases the total number of network resources which causes the slow down of loading speed in Blogger. 

How does the Lazy loading of YouTube videos work?

If you embed a YouTube video in the traditional method, it will load the required resources at the beginning of the page load whether the user plays the video or not. 

Instead of loading the video in the beginning we can delay a load of YouTube iframes by implementing the lazyload. So, when a user scrolls to the video, the video will start loading. 

It will save the server bandwidth and load the webpage faster. It also won’t block the main thread task and loads only when it is needed. 

But, instead of just applying the Lazyload, we can add a little placeholder which is basically an image with a play button and it will open the embedded video when a user clicks on it. 

In this way, the browser will load only the image and load the video only when a user clicks on the play button. Now you have learned how it works. Let’s see how you can implement lazy loading of iframes on your Blogger website. 

Video Guide 👇

YouTube video

How to lazyload Youtube Videos in Blogger?

To lazyload YouTube videos in Blogger follow the below steps. 

Step-1: Go to Blogger dashboard > theme > Edit HTML

Step-2: Now search for </body> tag. 

Step-3: Copy the below CSS & JS code and paste it above the </body> tag & save it. 

<style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0px;
  }
  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }
  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }
  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
    -moz-filter: brightness(75%);
    filter: brightness(75%);
  }
  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url('https://upload.wikimedia.org/wikipedia/commons/archive/0/09/20211015074810%21YouTube_full-color_icon_%282017%29.svg') no-repeat;
    cursor: pointer;
  }
  .youtube-player .play:hover {
    background: url('https://upload.wikimedia.org/wikipedia/commons/8/8b/YouTube_dark_icon_%282017%29.svg') no-repeat;
  }
</style>

JavaScript Code (Works in Theme code)

 <script>
  /*<![CDATA[*/
  function Lazy__iframe(div) {
    var iframe = document.createElement("iframe");
    iframe.setAttribute(
      "src",
      "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&amp;rel=0"
    );
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    iframe.setAttribute(
      "allow",
      "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    );
    div.parentNode.replaceChild(iframe, div);
  }
  function initYouTubeVideos() {
    var playerElements = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement("div");
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement("img");
      thumbNode.src = "https://i.ytimg.com/vi_webp/" + videoId + "/hqdefault.webp";
      thumbNode.alt = "video Tutorial on Youtube"; // set your alt attribute
      div.appendChild(thumbNode);
      var playButton = document.createElement("div");
      playButton.setAttribute("class", "play");
      div.appendChild(playButton);
      div.onclick = function () {
        Lazy__iframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }
  document.addEventListener("DOMContentLoaded", initYouTubeVideos);
/*]]>*/
</script>

Step-4: Now open the HTML view of the Blog post and paste the HTML code. 

<div class="youtube-player" data-id="VIDEO_ID"></div>

Step-5: Replace the YouTube video id in the above HTML code. 

Now your lazyloaded YouTube iframe is embedded in your blogger website. 

Here note that the video-embedded preview won’t show in the editor but work in the blog post. 

If you have any doubts or having trouble with this setup feel free to ask me in the comment section. 

JavaScript ( Works in Post Editor)

If the above script is not working in the post editor, then you can use the below script. 

 <script>
  function Lazy__iframe(div) {
    var iframe = document.createElement("iframe");
    iframe.setAttribute(
      "src",
      "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&amp;rel=0"
    );
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    iframe.setAttribute(
      "allow",
      "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    );
    div.parentNode.replaceChild(iframe, div);
  }
  function initYouTubeVideos() {
    var playerElements = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement("div");
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement("img");
      thumbNode.src = "https://i.ytimg.com/vi_webp/" + videoId + "/hqdefault.webp";
      thumbNode.alt = "video Tutorial on Youtube"; // set your alt attribute
      div.appendChild(thumbNode);
      var playButton = document.createElement("div");
      playButton.setAttribute("class", "play");
      div.appendChild(playButton);
      div.onclick = function () {
        Lazy__iframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }
  document.addEventListener("DOMContentLoaded", initYouTubeVideos);
</script>

You can also join our Telegram channel for discussion. 

If you are concerned about your website speed on your blogger website then you should follow some of the best practices given below. 

Conclusion

I hope this article will help you lazy load YouTube-embedded videos on the Blogger website. In fact, you can use this technique on any other website. 

If you like this video, then don’t forget to share this article with your Blogging community. 

Don’t forget to SUBSCRIBE to my YouTube Channel. Thank You. 👍

Change Log: 

  1. Now the thumbnail URL will load in webp format instead of JPEG format. (07-07-22)
  2. Changed the YouTube icon to Red
  3. Fixed the Image ALT Text issue on thumbnail image (21.04.24)

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I’m here to help bloggers like you to create an outstanding blog and earn money from it.

Related Articles..

How to Enable Double Click to Copy to Clipboard in Blogger

Enable Double Click to Copy Code to Clipboard in Blogger

ByAbhishek padhi

In this article, I will show you how you can enable double click to copy functionality in your Blogger website….

Leave a Reply

Your email address will not be published. Required fields are marked *

11 Comments

  6. Blogger ke theme me code paste karne ke baad dusre post k liye fir vi same code blogger ke theme me paste karna padega kya?

    matlab kya ekbar "theme section" me code paste karne ke baad dusre post ke liya bar bar same code theme me jake paste karna padega kya?

    Reply

  9. आपने जो script share की है वो अच्छे से काम कर रही है लेकिन ये script add करने पर blogger की theme ख़राब हो जाती है
    Ex. Search box, mobile main page width
    इसका solution बताय

    Reply