|
As you may be aware, the default YouTube iframe that we embed in our websites has a negative impact on page loading speed and website performance by loading a large number of third-party resources/JavaScripts in the front end.
This is an example of how to show an image thumbnail for a Youtube video while only loading the video when the user interacts with it.
Do you want Lazy Load your Embedded YouTube Videos too? If you want to lazy load your Embedded YouTube Videos to increase your website speed you can choose any of the choices below that I found from different sources.
Choice 1
Copy and paste below CSS code 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>Choice 2
Copy and paste below 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;
}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>Choice 3
Unlike the other choices where you install CSS codes 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>Choice 4
Copy and paste below 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 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>References:
- 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://ourcodeworld.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
