How to Lazy Load YouTube Videos in Blogger
Embedding YouTube videos directly on a page is easy, but each embed brings heavy third-party JavaScript and network requests. That slows down page load, hurts user experience on mobile, and can raise bounce rate.
Lazy loading replaces the heavy iframe with a lightweight poster (thumbnail) and only loads the real player when the user wants to play the video.
This article explains why lazy loading matters, and how it can help you speed up your blogger Website.
Why lazy-load YouTube embeds?
YouTube iframes pull in a lot of third-party JS and network requests (player JS, tracking, fonts, etc.). That increases First Contentful Paint (FCP), Largest Contentful Paint (LCP), and overall page weight — especially harmful on mobile. Replacing the heavy iframe with a single thumbnail + a tiny script improves perceived speed and saves data for users who never play the video.
Lazy Load YouTube Videos in Blogger
To lazyload a YouTube video, You need to Copy the below html code and replace the video id on it.
<div class="yt-lazy" data-id="2L5tJZb-ha0"> <div class="yt-thumb"></div> <div class="yt-play-btn"></div> </div>
After that you need to use the CSS and JavaScript before the closing Body tag (</body>) in theme section.
<style>
.yt-lazy {
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: #000;
cursor: pointer;
overflow: hidden;
}
.yt-thumb {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 0 !important;
}
.yt-lazy iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.yt-play-btn {
position: absolute;
top: 50%;
left: 50%;
width: 68px;
height: 48px;
background: #FF0000;
border-radius: 12px;
transform: translate(-50%, -50%);
}
.yt-play-btn:hover {
background: #03A9F4;
}
.yt-play-btn::before {
content: "";
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent #fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".yt-lazy").forEach(function (el) {
var id = el.dataset.id;
el.querySelector(".yt-thumb").style.backgroundImage =
"url(https://i.ytimg.com/vi_webp/" + id + "/hqdefault.webp)";
el.addEventListener("click", function () {
var iframe = document.createElement("iframe");
iframe.src = "https://www.youtube.com/embed/" + id + "?autoplay=1";
iframe.allow =
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
iframe.allowFullscreen = true;
el.innerHTML = "";
el.appendChild(iframe);
});
});
});
</script>Using this script, You are only loading a video thumbnail with play icon and once the user clicks on it, the actual video iframe starts loading in the browser.
In this way, You can load the webpage faster and make it Core web vitals ready.
Follow the video to Learn the exact step by step process on lazy loading youTube iframes in blogger website.
Lazyload Iframe with Video title
<div class="yt-lazy" data-id="2L5tJZb-ha0">
<div class="yt-title">Loading title…</div>
<div class="yt-thumb"></div>
<div class="yt-play-btn"></div>
</div>
<style>
.yt-lazy {
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: #000;
cursor: pointer;
overflow: hidden;
}
.yt-title {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 10px 14px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0));
z-index: 2;
pointer-events: none;
}
.yt-thumb {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-bottom:0!important;
}
.yt-lazy iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.yt-play-btn {
position: absolute;
top: 50%;
left: 50%;
width: 68px;
height: 48px;
background: #FF0000;
border-radius: 12px;
transform: translate(-50%, -50%);
transition: background 0.2s ease, transform 0.2s ease;
z-index: 2;
}
.yt-play-btn:hover { background: #03A9F4; }
.yt-play-btn::before {
content: "";
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent #fff;
}
.yt-lazy:hover .yt-play-btn {
background: #ff0000;
transform: translate(-50%, -50%) scale(1.05);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".yt-lazy").forEach(function (el) {
var id = el.dataset.id;
var titleBox = el.querySelector(".yt-title");
el.querySelector(".yt-thumb").style.backgroundImage =
"url(https://i.ytimg.com/vi_webp/" + id + "/hqdefault.webp)";
fetch(
"https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=" +
id +
"&format=json"
)
.then(function (res) {
return res.json();
})
.then(function (data) {
titleBox.textContent = data.title;
})
.catch(function () {
titleBox.textContent = "YouTube Video";
});
el.addEventListener("click", function () {
var iframe = document.createElement("iframe");
iframe.src = "https://www.youtube.com/embed/" + id + "?autoplay=1";
iframe.allow =
"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
iframe.allowFullscreen = true;
el.innerHTML = "";
el.appendChild(iframe);
});
});
});
</script>Lazy loading YouTube embeds saves bandwidth, improves perceived speed and Core Web Vitals, and gives users control over what third-party content loads.
Let me know if you face any issue during setup in the comment section. Don’t forget to Subscribe Key2blogging.
