Discover a Better Way to Embed YouTube Videos on Your Website

Discover a Better Way to Embed YouTube Videos on Your Website

If you’ve ever put a YouTube video on your website, you are aware of how simple the procedure is. However, did you realize that the size and loading speed of your website can be considerably impacted by each YouTube video embed? Finding a more effective method is crucial because the YouTube video player alone requires downloading over 900 kB of data.

The Pitfalls of Default YouTube Embeds:

The default YouTube embed code causes several HTTP requests, which slows down the loading of your pages and expands their byte size. Your website’s page speed and core vitals score are subsequently impacted, which may lower its search engine rankings.

Additionally, the default YouTube player is non-responsive due to its set dimensions. The video player might not scale correctly for users that access your website via mobile or tablet devices, resulting in a less-than-ideal user experience.

Introducing Lite YouTube Embeds:

Thankfully, a creative method called “Lite YouTube Embeds” can get around these problems. The now-retired Google+ technique was the inspiration for Lite YouTube Embeds, which drastically shrinks the original page size. It merely embeds a lightweight thumbnail image of the YouTube video rather than the whole video player.

When a user presses the play button, the actual video player loads dynamically, ensuring that additional JavaScript files are only downloaded when necessary. With this method, you may reduce the size of your web pages by over 900 kB, which will speed up loading and improve performance.

Responsive and User-Friendly:

In addition to shrinking the size of the website, Lite YouTube Embeds also makes your video embeds responsive. In order to provide an optimal watching experience across a range of devices, the new on-demand embed code dynamically modifies the player’s dimensions based on the visitor’s screen size.

Discover a Better Way to Embed YouTube Videos on Your Website

Implementing Lite YouTube Embeds:

You might be unsure about how to use this novel strategy to your website. It’s very easy, and we’ve written a simple guide for you:

Step 1: Copy and paste the following HTML code onto the page where you want the YouTube video to be displayed. Ensure that “VIDEO_ID” is changed to the correct ID for your YouTube video.

<div class="youtube-player" data-id="VIDEO_ID"></div>

If you want to embed many YouTube videos on one page, you can add multiple DIV blocks with various video IDs.

Step 2: Copy the provided JavaScript and put it wherever you want in your website template. When a visitor interacts with the DIV components, this script cleverly replaces them with video thumbnails and a play button.

<script>
  /*
   * Light YouTube Embeds by @labnol
   * Credit: https://www.labnol.org/
   */

  function labnolIframe(div) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1');
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allowfullscreen', '1');
    iframe.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    div.parentNode.replaceChild(iframe, div);
  }

  function initYouTubeVideos() {
    var playerElements = document.querySelectorAll('.youtube-player');
    for (var n = 0; n < playerElements.length; n++) {
      var videoId = playerElements[n].dataset.id;
      var div = document.createElement('div');
      div.setAttribute('data-id', videoId);
      var thumbNode = document.createElement('img');
      thumbNode.src = '//i.ytimg.com/vi/' + videoId + '/hqdefault.jpg';
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        labnolIframe(this);
      };
      playerElements[n].appendChild(div);
    }
  }

  document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>

Step 3: To guarantee the greatest user experience, copy and paste the offered CSS before your website template’s closing head tag.

<style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
  }

  .youtube-player img:hover {
    -webkit-filter: brightness(75%);
  }

  .youtube-player .play {
    height: 48px;
    width: 68px;
    left: 50%;
    top: 50%;
    margin-left: -34px;
    margin-top: -24px;
    position: absolute;
    background: url('https://i.ibb.co/j3jcJKv/yt.png') no-repeat;
    cursor: pointer;
  }
</style>

Witness the Difference with Lite YouTube Embeds:

Visit the provided demo page to learn how Lite YouTube Embeds works and how it improves your web sites. There are two videos there that are similar to one other. The second video illustrates the lite option, loading the YouTube video on demand, while the first uses the standard IFRAME code from YouTube.

The thumbnail image for the second video changes to the default YouTube video player with autoplay turned on when viewers click the play button. The big benefit is that the extra YouTube JavaScript is only loaded when a user chooses to view the embedded video rather than automatically when the page first loads.

Embrace the Future of YouTube Embedding:

You may enhance page speed, improve website performance, and guarantee a flawless user experience by implementing Lite YouTube Embeds. Additionally, regardless of the viewing device, your web pages will load quicker and respond better.

Recall that improving user experience is essential to achieving higher search engine rankings. So why not start utilizing Lite YouTube Embeds right away and unleash the full power of the video content on your website?

Please be aware that while Lite YouTube Embeds operate without a hitch on the majority of browsers and devices, Chrome and Safari on iPhone and Android smartphones only permit HTML5 video playback when the user interacts with the device. To reduce cellular data usage, they stop embedded media from automatically playing back.

 

Leave a Comment