Is your site lagging every time you embed a video? The standard YouTube iframe is a notorious speed killer because it tries to load everything the second a visitor hits your page.
Moving to lazy loading is a total game-changer. It keeps your site feeling light by waiting until someone actually clicks to load the video. I’ve put together a few reliable ways to set this up—just pick the one that fits your technical comfort level and give your site a speed boost!
The Smooth Loader (CSS & JavaScript)
Copy and paste below CSS mark 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 below script 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>Copy and paste below markup to your post where you want to show your video. Paste it inside your post HTML view.
<div class="video-container" data-embed="PUT YOUR VIDEO ID HERE"></div>The Clean Setup (Asynchronous Loading)
Copy and paste below CSS mark 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;
}Copy and paste below script 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>Copy and paste below markup to your post where you want to show your video. Paste it inside your post HTML view.
<!-- 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)
Unlike the other choices where you install CSS marks and Script, this choice is straightforward. Just copy and paste it in to your post to where you want to show your video.
<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)
Copy and paste below CSS mark 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 below 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>Copy and paste below markup to your post where you want to show your video. Paste it inside your post HTML view.
<lite-youtube videoid="PUT YOUR VIDEO ID HERE" playlabel="Play: PUT YOUR VIDEO TITLE HERE"></lite-youtube>
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
