How to Lazy Load YouTube Videos in Blogger (Improve Core Web Vitals)
If you are embedding YouTube videos on your Blogger website, you might be unknowingly slowing down your site.
By default, YouTube embeds load heavy scripts, which increase page load time and hurt your Core Web Vitals.
The solution? Lazy loading YouTube videos.
In this guide, you’ll learn how to lazy load YouTube videos in Blogger using a simple method that improves speed, SEO, and user experience.
What is Lazy Loading YouTube Videos?
Lazy loading means delaying the loading of a YouTube video until the user clicks on it.
Instead of loading the full video player immediately, your website first shows a lightweight thumbnail. The video loads only when needed.
This reduces page size and improves performance significantly.
Why You Should Lazy Load YouTube Videos
Here are the biggest benefits:
- Faster page load time
- Better Core Web Vitals (especially LCP)
- Improved SEO rankings
- Reduced unnecessary data usage
- Better user experience
If your blog contains multiple videos, lazy loading becomes even more important.
How to Lazy Load YouTube Videos in Blogger
Follow the steps below to Implement Lazyloading of YouTube iframes.
Paste this where you want the video. Replace VIDEO_ID with your YouTube video ID.
Example – 7k23JwtuebA
<div class="yt-lazy" data-id="VIDEO_ID"> <div class="yt-thumb"></div> <div class="yt-play-btn"></div> </div>
Now, You can directly use the css and Js code directly in the page or paste it in your theme code. So, you don’t have to use this on all pages.
<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>🚀 Result
- Page loads faster ⚡
- No heavy iframe until click
- Better SEO & Core Web Vitals
- Works perfectly on Blogger
Video Tutorial
Version 02 (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>FAQs
What is lazy loading YouTube videos?
Lazy loading YouTube videos means loading the video player only when a user clicks on it instead of loading it immediately when the page opens. This reduces page load time and improves performance.
Why should I lazy load YouTube videos in Blogger?
Embedding YouTube videos using iframes slows down your website because it loads heavy scripts. Lazy loading improves page speed, reduces bounce rate, and helps with better SEO rankings.
Does lazy loading affect video playback?
No, it does not affect playback. The video loads normally once the user clicks on the thumbnail.
Is lazy loading good for SEO?
Yes, lazy loading improves Core Web Vitals like Largest Contentful Paint (LCP), which is a ranking factor. Faster websites generally rank better on search engines.
Can I lazy load multiple YouTube videos on one page?
Yes, this method supports multiple videos. Each video will load only when clicked, without affecting others.
Will this work on mobile devices?
Yes, the lazy load setup is fully responsive and works perfectly on mobile, tablet, and desktop devices.
Can I use this method in WordPress as well?
Yes, this method works in WordPress too. However, WordPress users can also use plugins if they prefer a no-code solution.
Conclusion
Lazy loading YouTube videos is one of the simplest upgrades you can make to your Blogger website, but the impact is huge. Instead of loading heavy YouTube iframes that slow down your page, you only load the video when the user actually wants to watch it.
This not only improves your website speed but also enhances user experience and boosts your chances of ranking higher on Google. With better Core Web Vitals and reduced load time, your site becomes more efficient and user-friendly.
The best part is that you don’t need any plugin or advanced setup. Just a small piece of code can make your website significantly faster.
If you are serious about SEO and performance, this is something you should implement on every page where you embed videos.
