Home
Blogger Guide
Page speed

How to Lazy load embedded YouTube videos in Blogger?

 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 mention 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 video works?

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 👇

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(&quot;https://upload.wikimedia.org/wikipedia/commons/archive/0/09/20211015074810%21YouTube_full-color_icon_%282017%29.svg&quot;) 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>

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

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. 

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. 

You can check more Tutorials in the Blogging Guide category. 

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 and Add a Hover effect on icons