Speed Up Your Site Lazy Load YouTube Videos!

by:Van Dewey Balao Published:
Top view of a person using YouTube platform to watch videos.

Have you ever noticed your website loading a bit slowly, especially when you have a lot of YouTube videos embedded? You're not alone! The standard way we embed YouTube videos (using their default iframe) can actually drag down your website's speed. This happens because it loads a lot of extra files and code in the background, even if no one is watching the video yet.

So, do you want a faster website? Do you want to lazy load your embedded YouTube videos? If your answer is yes, you're in the right place!

Lazy loading means that your video won't fully load until a visitor actually scrolls down and clicks on it. This can make a huge difference in how quickly your website appears to your users.

I've gathered some great options from different places, and I'll share them below. You can pick the method that works best for you to help speed up your website significantly. Let's get your site loading lightning fast!

Option #1

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>

Option #2

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>

Option #3

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>

Option #4

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>





Sources:

  1. Embed YouTube videos the right way with LazyLoad technique [Blog post]. (n.d.). Retrieved from https://www.blogengage.com/navigator.php?link=152469
  2. 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
  3. 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
  4. Irish, P. (n.d.). Paulirish/lite-YouTube-embed: A faster YouTube embed [Web log post]. Retrieved from https://github.com/paulirish/lite-youtube-embed
  5. 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

Tags:

Van Dewey Balao

It's ok if you disagree with me. I can't force you to be right!

You might like

View all

I love hearing from you! To keep our conversations positive and respectful for everyone, comments are checked for decency before they're published. Please read my Comments Policy here.

Previous Post Next Post
Share to other apps
Copy Post Link