How to lazyload youtube videos on blogger. To lazyload YouTube videos on Blogger, you will need to use JavaScript to modify the way that the videos are embedded on your blog. Here is a simple way to do this:

How to lazyload youtube videos on blogger

Go to your Blogger dashboard and click on the "Template" tab.

Click on the "Edit HTML" button to access the HTML code for your blog.

Search for the closing </head> tag in the HTML code.

Just above the closing </head> tag, add the following code:

Copy code

<script>

  function lazyLoad(elements) {

    for (var i = 0; i < elements.length; i++) {

      var element = elements[i];

      if (element.getBoundingClientRect().top <= window.innerHeight) {

        var iframe = element.querySelector("iframe");

        iframe.src = iframe.dataset.src;

        element.classList.remove("lazy");

      }

    }

  }

  var lazyVideos = document.querySelectorAll(".lazy");

  window.addEventListener("scroll", function () {

    lazyLoad(lazyVideos);

  });

  lazyLoad(lazyVideos);

</script>

Save your changes to the template.

Now, to lazyload a YouTube video on your blog, you will need to wrap the iframe element that embeds the video in a div element with the lazy class and specify the source of the video using the data-src attribute of the iframe element. For example:

Copy code

<div class="lazy">

  <iframe data-src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

When the page is loaded, the video will not be loaded until the div element comes into view. This can help to improve the performance of your blog by reducing the number of videos that are loaded at once.

I hope this helps! Let me know if you have any questions.