Home
Codings
Tutorials

How to Lazy Load Embed YouTube Videos in Blogger

Table of Contents
Lazy Load Embed YouTube Videos in Blogger

Do you want to Lazy Load YouTube Videos in Blogger? Follow the below steps carefully to Lazy Load YouTube Videos in Blogger, and enjoy a smoother and faster website.

What is Lazy Load ?

Lazy Loading is a widely used strategy for enhancing webpage loading speed by deferring the loading of images and videos until after the initial webpage content has loaded. When implementing lazy loading on your website, only the images visible in the initial viewport will load. As users scroll down the page, additional images are loaded dynamically.

From a technical standpoint, lazy loading relies on JavaScript to monitor the user's current viewport and load only the images and videos that are currently within view. This means that if users don't access certain images or don't scroll down the page, those assets remain unloaded, saving valuable bandwidth.

The implementation of Lazy Loading involves inserting a script into the webpage's code. This script prevents image and video files from loading immediately when a user opens the page but initiates their loading when the user reaches the specific part of the website where those media assets are located.

One significant advantage of lazy loading is its substantial impact on website loading speed. This approach leads to a faster overall loading time, providing users with a satisfying and efficient browsing experience. Consequently, users are more likely to stay on the website, which can result in increased conversion rates.

Benefits of lazy loading include:

  1. Faster Page Loading: Lazy loading reduces the initial page load time because it doesn't load all assets simultaneously. This can lead to a better user experience, especially on slower internet connections or less powerful devices.

  2. Improved Performance: By loading content as needed, lazy loading reduces the strain on server resources and bandwidth, improving overall website performance and reducing the risk of crashes during traffic spikes.

  3. Lower Data Usage: Lazy loading can help users save on data usage since only the content they actually view is loaded. This is particularly important for mobile users with limited data plans.

  4. Better SEO: Search engines take page load times into account when ranking websites. Lazy loading can positively impact SEO by speeding up page loading, resulting in better search engine rankings.

  5. Enhanced User Experience: Users can start interacting with the page more quickly, as they don't have to wait for all assets to load before seeing content. This can reduce bounce rates and increase user engagement.

Lazy loading not only benefits users but also conserves their bandwidth, as they don't need to download all the images at once. This optimized approach allows users to navigate your site more swiftly and efficiently, contributing to a better user experience.

In essence, lazy loading is a highly effective technique for optimizing both the perceived and actual performance of websites. It not only accelerates page loading but also enhances user satisfaction, making it a valuable addition to web development strategies.

Why to add Lazy Load YouTube Videos in Blogger?

The default YouTube iframe embedded in websites can have a detrimental impact on your site's loading speed due to the substantial resources it loads on the front end. 

Typically, an embedded YouTube video iframe can consume anywhere from 500 to 700 kilobytes of data, which can contribute to around 50 to 60 percent of the entire page's size. This heavy resource load can act as a significant bottleneck, even if you have diligently optimized other elements like images, CSS, and JavaScript loading.

One of the critical issues caused by embedding YouTube videos without lazy loading is that it blocks the main thread when you test your website using tools like PageSpeed Insights. This blockage can result in a cascade of errors and warnings that negatively affect your website's performance.

Lazy Load Embed YouTube Videos in Blogger

Some common issues triggered by embedded YouTube videos include:

  1. Reduce the Impact of Third-Party Code: YouTube videos are considered third-party code, and when not lazy loaded, they can have a substantial impact on your website's speed. Lazy loading helps mitigate this impact by delaying the loading of these resources until they are actually needed.

  2. Some Third-Party Resources Can Be Lazy-Loaded with a Facade: Lazy loading provides a way to load third-party resources, like YouTube videos, with a facade. This means that the resources are loaded only when a user interacts with the video, reducing initial page load times.

  3. Does Not Use Passive Listeners to Improve Scrolling Performance: Passive event listeners can enhance scrolling performance on your website. By applying lazy loading to YouTube videos, you can implement passive event listeners to improve user experience.

  4. Reduce JavaScript Execution Time: Lazy loading YouTube videos can help reduce the execution time of JavaScript on your page, as these resources are deferred until necessary. This can lead to smoother website performance.

  5. Remove Unused JavaScript: Embedding YouTube videos without lazy loading often involves loading JavaScript code that might not be needed immediately. Lazy loading ensures that only the necessary JavaScript is loaded, reducing unnecessary overhead.

By addressing these issues through the implementation of Lazy Load technology, you can effectively fix these errors and enhance the loading speed of your Blogger website. 

This not only improves user experience but also positively impacts your site's SEO and overall performance, ensuring that your content is accessible and engaging for your audience.

How Lazy Load of YouTube Videos works?

Lazy loading of YouTube videos is a technique designed to enhance website performance and improve user experience. 

When you embed a YouTube video using the default method, it loads all the necessary resources as soon as the page loads, regardless of whether the user intends to play the video or not. This can significantly slow down your website's loading speed.

To address this issue, lazy loading technology is employed. Instead of loading video resources upfront, lazy loading delays their retrieval until they are actually needed. 

This means that when a user scrolls down the page and the video becomes visible in the viewport or when the user clicks on a play button, only then are the required resources loaded automatically.

This approach offers several advantages. Firstly, it improves page speed by preventing unnecessary resource loading and blocking of main thread tasks. It also conserves server bandwidth, as resources are fetched only when they are necessary. 

Additionally, lazy loading ensures a smoother user experience by initially loading only a lightweight thumbnail image of the video. When the user decides to watch the video, the necessary resources are fetched promptly, and playback begins without interruption.

In essence, lazy loading of YouTube videos optimizes website performance, reduces resource overhead, and provides a more seamless user experience, making it a valuable addition to any website seeking to deliver video content efficiently.

How to Lazy Load YouTube Videos in Blogger?

Lazy loading YouTube videos in Blogger can help improve your website's performance by only loading the videos when they are clicked on by the user. To achieve this, you need to add the provided HTML, CSS, and JavaScript directly to your Blogger theme and post sections. Here's a step-by-step guide on how to do it:

Step 1: Add CSS and JavaScript to Blogger Theme

  1. Go to your Blogger dashboard.
  2. Click on "Theme" in the left-hand menu.
  3. Click the "Edit HTML" button.

In the HTML editor, add the CSS and JavaScript code provided to the appropriate sections:

Add the CSS code between <style> and </style> tags in the <head> section of your theme's HTML: 

  <style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0px;
  }
  .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%);
    -moz-filter: brightness(75%);
    filter: brightness(75%);
  }
  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
     background: url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat;
    cursor: pointer;
  }
</style>

Add the JavaScript code right before the closing </body> tag: 

<script type="text/javascript">
  //<![CDATA[
  function labnolIframe(div) {
    var iframe = document.createElement("iframe");
    iframe.setAttribute(
      "src",
      "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
    );
    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.getElementsByClassName("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 = "https://i.ytimg.com/vi/ID/hqdefault.jpg".replace(
        "ID",
        videoId
      );
      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>

Save your theme's changes.

Step 2: Add HTML to Your Blog Post

Now that you've added the necessary CSS and JavaScript to your theme, you can embed YouTube videos in your blog posts using lazy loading. Here's how to do it:

  1. Create or edit a blog post in Blogger.
  2. In the HTML editor for your blog post, add the following HTML code wherever you want to embed a YouTube video: 
  <div class="youtube-player" data-id="VIDEO_ID"></div>

Replace VIDEO_ID with the actual YouTube video ID you want to embed.

For example, if you want to embed a video with the YouTube URL https://www.youtube.com/watch?v=abc1234567, your HTML code should be: 

  <div class="youtube-player" data-id="abc1234567"></div>
  1. Publish or update your blog post.

Now, when users view your blog post, the YouTube video will be loaded only when they click on it, thanks to the lazy loading technique implemented using the provided CSS and JavaScript.

Make sure to replace VIDEO_ID with the actual video IDs of the YouTube videos you want to embed in your blog posts. You can repeat this process for each video you want to add.

Conclusion

Lastly, lazy loading is a great strategy that reduces the initial loading time of web applications to a great extent. However, to use this strategy, as a web designer, it is important to be properly aware of its negative effects while developing any programming.

A right and usable application will ensure better user experiences. It is important to have the well-organized web content for a good browsing experience. Lazy Loading technology speeds up the loading of a website, while also saving bandwidth.

Thank you for Reading

Post a Comment

-->