Embedding YouTube videos directly into blog posts can sometimes slow down your website, especially when several videos load at the same time. Standard YouTube iframes immediately load multiple scripts, tracking files, thumbnails, and player resources the moment a visitor opens the page.
This can noticeably affect page speed and overall user experience.
One of the best ways to improve performance is by using lazy loading. Instead of loading the full YouTube player immediately, the video only loads once the visitor actually clicks on it.
Below are several different methods you can use depending on your preferred setup and technical experience level.
The Smooth Loader (CSS & JavaScript)
Copy and paste the CSS code below above ]]></b:skin>
.video-container {background-color: #000;margin-bottom: 30px;position: relative;padding-top: 56.25%;overflow: hidden;cursor: pointer;color:white;}
.video-container img {width: 100%;top: -16.82%;left: 0;opacity: 0.7;}
.video-container .play-button {width: 90px;height: 60px;background-color: red;box-shadow: 0 0 30px rgba( 0,0,0,0.6 );z-index: 1;opacity: 0.8;border-radius: 6px;}
.video-container .play-button:before {content: "";border-style: solid;border-width: 15px 0 15px 26.0px;border-color: transparent transparent transparent #fff;}
.video-container img,.video-container .play-button {cursor: pointer;}
.video-container img,.video-container iframe,.video-container .play-button,.video-container .play-button:before {position: absolute;}
.video-container .play-button,.video-container .play-button:before {top: 50%;left: 50%;transform: translate3d( -50%, -50%, 0 );}
.video-container iframe {height: 100%;width: 100%;top: 0;left: 0;}
.video-container .loading {position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.loading .loader {border: 5px solid grey; border-top: 5px solid #ffffff; border-radius: 50%;width: 60px;height: 60px;animation: spin 2s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}Copy and paste the script below above </body>
<script>var youtube=document.querySelectorAllundefined".video-container");ifundefined0<youtube.length)forundefinedvar i=0;i<youtube.length;i++){var playbutton=youtube[i].innerHTML="<div class='play-button'></div>",source="https://img.youtube.com/vi/"+youtube[i].dataset.embed+"/hqdefault.jpg",image=new Image;image.src=source,image.addEventListenerundefined"load",void youtube[i].appendChildundefinedimage)),youtube[i].addEventListenerundefined"click",functionundefined){this.innerHTML="<div class='loading'><div class='loader'></div></div>";var e=document.createElementundefined"iframe");e.setAttributeundefined"frameborder","0"),e.setAttributeundefined"allowfullscreen",""),e.setAttributeundefined"allow","autoplay"),e.setAttributeundefined"src","https://www.youtube.com/embed/"+this.dataset.embed+"?rel=0&showinfo=0&autoplay=1"),this.appendChildundefinede)})};</script>Paste the markup below inside your post HTML view wherever you want the video to appear:
<div class="video-container" data-embed="PUT YOUR VIDEO ID HERE"></div>The Clean Setup (Asynchronous Loading)
This method uses asynchronous thumbnail loading for a cleaner and lighter setup.
Copy and paste the CSS code above ]]></b:skin>
.embed-youtube {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.embed-youtube img {
width: 100%;
top: -16.84%;
left: 0;
opacity: 0.7;
}
.embed-youtube .embed-youtube-play {
width: 68px;
height: 48px;
background-color: #333;
box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
z-index: 1;
opacity: 0.8;
border-radius: 6px;
}
.embed-youtube .embed-youtube-play:before {
content: "";
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent #fff;
}
.embed-youtube img,
.embed-youtube .embed-youtube-play {
cursor: pointer;
}
.embed-youtube img,
.embed-youtube iframe,
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
position: absolute;
}
.embed-youtube .embed-youtube-play,
.embed-youtube .embed-youtube-play:before {
top: 50%;
left: 50%;
transform: translated( -50%, -50%, 0 );
}
.embed-youtube iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.embed-youtube .embed-youtube-play:hover {
background-color: #f00;
}Then add the JavaScript above </body>
<script>
undefinedfunctionundefined){
let YouTubeContainers = document.querySelectorAllundefined".embed-youtube");
// Iterate over every YouTube container you may have
for undefinedlet i = 0; i < YouTubeContainers.length; i++) {
let container = YouTubeContainers[i];
let imageSource = "https://img.youtube.com/vi/"+ container.dataset.videoId +"/sddefault.jpg";
// Load the Thumbnail Image asynchronously
let image = new Imageundefined);
image.src = imageSource;
image.addEventListenerundefined"load", functionundefined) {
container.appendChildundefinedimage);
});
// When the user clicks on the container, load the embedded YouTube video
container.addEventListenerundefined"click", functionundefined) {
let iframe = document.createElementundefined "iframe" );
iframe.setAttributeundefined"frameborder", "0");
iframe.setAttributeundefined"allowfullscreen", "");
iframe.setAttributeundefined"allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
// Important: add the autoplay GET parameter, otherwise the user would need to click over the YouTube video again to play it
iframe.setAttributeundefined"src", "https://www.youtube.com/embed/"+ this.dataset.videoId +"?rel=0&showinfo=0&autoplay=1");
// Clear Thumbnail and load the YouTube iframe
this.innerHTML = "";
this.appendChildundefined iframe );
});
}
})undefined);
</script>Paste this markup inside your post HTML editor:
<!-- 1. Video Wrapper Container -->
<div class="embed-youtube" data-video-id="PUT YOUR VIDEO ID HERE">
<!-- 2. The preview button that will contain the Play icon -->
<div class="embed-youtube-play"></div>
</div>The No-Code Shortcut (Srcdoc Iframe)
This is the easiest setup because it does not require adding separate CSS or JavaScript files.
Simply paste this directly inside your post HTML view:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/PUT YOUR VIDEO ID HERE"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/PUT YOUR VIDEO ID HERE?autoplay=1><img src=https://img.youtube.com/vi/<PUT YOUR VIDEO ID HERE/hqdefault.jpg alt='PUT YOUR IMAGE ALT HERE'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="PUT YOUR VIDEO TITLE HERE"
></iframe>The Ultra-Light Lite-YouTube (Web Components)
This method is one of the lightest YouTube embedding solutions available and is excellent for improving Core Web Vitals performance.
Add the provided Lite-YouTube CSS and JavaScript into your Blogger template.
Copy and paste the CSS code above ]]></b:skin>
lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
max-width: 720px;
}
/* gradient */
lite-youtube::before {
content: '';
display: block;
position: absolute;
top: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
background-position: top;
background-repeat: repeat-x;
height: 60px;
padding-bottom: 50px;
width: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
/* responsive iframe with a 16:9 aspect ratio
thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
content: "";
display: block;
padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
/* play button */
lite-youtube > .lty-playbtn {
width: 68px;
height: 48px;
position: absolute;
cursor: pointer;
transform: translate3d(-50%, -50%, 0);
top: 50%;
left: 50%;
z-index: 1;
background-color: transparent;
/* YT's actual play button svg */
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
filter: grayscale(100%);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
border: none;
}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
filter: none;
}
/* Post-click styles */
lite-youtube.lyt-activated {
cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
opacity: 0;
pointer-events: none;
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}Copy and paste the script above </body>
<script>class LiteYTEmbed extends HTMLElement{connectedCallbackundefined){this.videoId=this.getAttributeundefined'videoid');let playBtnEl=this.querySelectorundefined'.lty-playbtn');this.playLabel=undefinedplayBtnEl&&playBtnEl.textContent.trimundefined))||this.getAttributeundefined'playlabel')||'Play';ifundefined!this.style.backgroundImage){this.posterUrl=`https:LiteYTEmbed.addPrefetchundefined'preload',this.posterUrl,'image');this.style.backgroundImage=`urlundefined"${this.posterUrl}")`}ifundefined!playBtnEl){playBtnEl=document.createElementundefined'button');playBtnEl.type='button';playBtnEl.classList.addundefined'lty-playbtn');this.appendundefinedplayBtnEl)}ifundefined!playBtnEl.textContent){const playBtnLabelEl=document.createElementundefined'span');playBtnLabelEl.className='lyt-visually-hidden';playBtnLabelEl.textContent=this.playLabel;playBtnEl.appendundefinedplayBtnLabelEl)}this.addEventListenerundefined'pointerover',LiteYTEmbed.warmConnections,{once:true});this.addEventListenerundefined'click',e=>this.addIframeundefined))}static addPrefetchundefinedkind,url,as){const linkEl=document.createElementundefined'link');linkEl.rel=kind;linkEl.href=url;ifundefinedas){linkEl.as=as}document.head.appendundefinedlinkEl)}static warmConnectionsundefined){ifundefinedLiteYTEmbed.preconnected)return;LiteYTEmbed.addPrefetchundefined'preconnect','https://www.youtube-nocookie.com');LiteYTEmbed.addPrefetchundefined'preconnect','https://www.google.com');LiteYTEmbed.addPrefetchundefined'preconnect','https://googleads.g.doubleclick.net');LiteYTEmbed.addPrefetchundefined'preconnect','https://static.doubleclick.net');LiteYTEmbed.preconnected=true}addIframeundefined){const params=new URLSearchParamsundefinedthis.getAttributeundefined'params')||[]);params.appendundefined'autoplay','1');const iframeEl=document.createElementundefined'iframe');iframeEl.width=560;iframeEl.height=315;iframeEl.title=this.playLabel;iframeEl.allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';iframeEl.allowFullscreen=true;iframeEl.src=`https:this.appendundefinediframeEl);this.classList.addundefined'lyt-activated');this.querySelectorundefined'iframe').focusundefined)}}customElements.defineundefined'lite-youtube',LiteYTEmbed);</script>Paste the markup below inside your post HTML view wherever you want the video to appear:
<lite-youtube videoid="PUT YOUR VIDEO ID HERE" playlabel="Play: PUT YOUR VIDEO TITLE HERE"></lite-youtube>Final Thoughts
Using lazy-loaded YouTube embeds can significantly improve page speed, especially on content-heavy blogs that contain multiple videos.
Instead of forcing the full YouTube player to load immediately, these methods only load the actual video when visitors interact with it, helping reduce unnecessary requests and improving overall browsing performance.
Choose the setup that best matches your technical comfort level and Blogger customization experience.
Source(s):
- Embed YouTube videos the right way with LazyLoad technique [Blog post]. (n.d.). Retrieved from https://www.blogengage.com/navigator.php?link=152469
- Delgado, C. (2021, February 25). How to properly configure "Lazy loading" of a YouTube embed video [Blog post]. Retrieved from https://ourmarkworld.com/articles/read/1383/how-to-properly-configure-lazy-loading-of-a-youtube-embed-video
- Corenzan, A. (2019, August 7). Lazy load embedded YouTube videos [Web log post]. Retrieved from https://dev.to/haggen/lazy-load-embedded-youtube-videos-520g
- Irish, P. (n.d.). Paulirish/lite-YouTube-embed: A faster YouTube embed [Web log post]. Retrieved from https://github.com/paulirish/lite-youtube-embed
- Nocera, D. (2020, December 17). How to lazy load an embedded YouTube video [Blog post]. Retrieved from https://dev.to/darnocer/lazy-loading-responsive-youtube-video-with-image-thumbnail-fake-play-button-7l3
