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. 

Lazy load Embeded YouTube video in blogger


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. 


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 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 load 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 in your Blogger website. 

Video Guide 👇


How to lazyload Youtube Video in Blogger?

To lazyload Youtube video 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 </body> tag & save it. 

&lt;style&gt;
.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/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg&quot;) no-repeat;
  cursor: pointer;
}
&lt;/style&gt;

&lt;script type=&#39;text/javascript&#39;&gt;
//&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/ID/hqdefault.jpg&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;
&lt;/script&gt;&lt;/div&gt;

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 is won't show in the editor but work in the blog post. alert-success

If you have any doubt 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 concern about your website speed in your blogger website then you should follow some of the best practices given below. 

You can check more Tutorials on the Blogging guide category. 

Conclusion

I hope this article will help you lazy load YouTube embedded video 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. 👍

2 Comments

Don't Add Links as it goes to spam. Share yours valuable feedback. Thanks

  1. Can you help us to create a Load More Button like you have in your site for us? We need to create the button like yours, so please help us from your next post.

    ReplyDelete
    Replies
    1. This feature came build-in in this theme. I didn't add this button.

      Delete

Post a Comment

Don't Add Links as it goes to spam. Share yours valuable feedback. Thanks

Post a Comment

Previous Post Next Post