How to Lazy load embedded YouTube videos in Blogger 2022

 

Do you want to increase the engagement of your audience with your blog?  Do you want to decrease your Bounce rate?

If yes then this simple trick will help you to increase the engagement as well as decrease the bounce rate of your blog.

Nowadays people prefer videos over written content,  safe you combine your blog with YouTube videos then you can take your blogging journey to the next level.

In this article I will tell you  how to add YouTube videos in blogger and how to do easy load YouTube videos so that it doesn't harm your blog performance. 

Embedding videos in your blog is one of the most successful way to combine your content marketing and YouTube videos.  

When you embed videos in your article, the content becomes more engaging. And according to a research, blog posts which have videos embedded, generates more inbound links and an increased viewership. And this reason is enough for you to embed youtube videos in Blogger blog.

So, I will be sharing first, the traditional method which is the most easiest and fastest method and then  the new method which requires you to add few codes.

Traditional method to embed YouTube videos in Blogger

The first thing you need to do to use YouTube Lazy Load is to go to the close section of the body tag of your template. Then you need to copy and paste the following code </body> on top of this tag.

</body>

<script>

//<![CDATA[

!function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}();

//]]>

</script>

The next thing you need to do is </b> skin> find this code.

Then copy and paste the following code </b>: skin> over this tag.

/*! llyv.css v0.1.0 */ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:20px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0}.llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}

Now notice the embed id in the post where you want to share the video of YouTube. Change the embed ID marked in red below and give your video id. Then YouTube lazy load will work on your post. And the speed of your page will be the same as before.

<div class="llyv" data-id="o9U1wUM_DDA">

<img src="https://img.youtube.com/vi/o9U1wUM_DDA/hqdefault.jpg"/></div>

That's it. You have successfully embeded Yotube video with lazy load in Blogger.

Conclusion

Embedding YouTube videos is great for content  marketing strategy.  but adding videos can also add extra load time to your blog. So lazy loading YouTube videos is the best solution to embed YouTube videos in blogger.

I hope this method helps you. In case, you find any difficulties, do comment down below.  I would love to help you.