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.
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.

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
How Lazy loading of Youtube video works?
Video Guide 👇
How to lazyload Youtube Video in Blogger?
<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>
<script>
//<![CDATA[
function labnolIframe(div) {
var iframe = document.createElement("iframe");
iframe.setAttribute(
"src",
"https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&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/ID/hqdefault.webp".replace(
"ID",
videoId
);
div.appendChild(thumbNode);
var playButton = document.createElement("div");
playButton.setAttribute("class", "play");
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}
document.addEventListener("DOMContentLoaded", initYouTubeVideos);
//]]>
</script></div>
<div class="youtube-player" data-id="VIDEO_ID"></div>
- 15 simple hacks to speed up the Blogger website.
- Fix avoid chaining critical request
- Install Latest jQuery
- Setup Cloudflare CDN