Home
Blogger Guide
Coding Guide

How to add lazy load youtube embed videos Script 100% working for Blogger

lazy load youtube embed

Do you Want to use Lazy load YouTube embed Video on Blogger Website? Yes, Article for you

Hi Friends, I will share how to reduce YouTube video upload time on your website and Reduce Website Loading Time With lazy load YouTube embed. This creates some simple steps for your website. You make simple changes to your website HTML scripts a little bit to iframes.

What's wrong with using the default YouTube Iframe script on the web?

The default YouTube Iframe used a lot of resources on your website. This slows down your website loading speed. So, your site loads very slowly.

The embedded YouTube Iframe script takes up 400 to 800 KB using 40 to 65 percent of your whole page SIze. So, how to reduce your YouTube Iframe loading time for faster performance.

It loads all your pages and homepage. When you check your webpage on google insight you will see an error like Speed YouTube.

Google Page Speed triggers error also mention below.

  • Reduce JavaScript execution time 
  • Does not use passive listeners to improve scrolling performance 
  • Reduce the impact of third-party code 
  • Some third-party resources can be lazy-loaded with a facade 
  • Remove unused JavaScript

How to Work lazy load youtube embed Script?

The lazy load youtube embed videos are the Traditional method of load youtube videos on the blog. it will do not load the required resource at the of the page load only load user can play them or not.

Instead of loading the Youtube video on Instant starting, can delay the loading time of youtube iframes by activating lazy. so, the user scrolls and plays the video, the video will be started.

It Automatically saves your Server bandwidth and increases your website loading speed faster.it does not block any tasks only load when you need time.

but, instead of using Lazyload, you can add a small placeholder. this is a simple button image and it is used to open YT embedded Video when visitors click the button.

This way makes, the browser will load only the image that did not load the YT video. you can load the Yt Video Click The Play button. now you Can understand how it Works Script. Let See how to Add a lazy load Youtube Embed Video iframe script on your blogger Website.

if you want to Download this Script Please hit the Download button and Download All-Script on the Device

Download

How to add lazy load Youtube Embed Video on Blogger Step By Step

Just Follow the Simple to Enable Lazy load Youtube Script on blogger

  • Step 1: Go to your Blogger Account 
  • Step 2: Select the "Theme" section on the sidebar 
  • Step 3: and, Click the "Edit Html" on the DropDown Menu 
  • Step 4: Now Press Ctrl+F And Search the </body> tag on the script. 
  • Step 5: Copy the CSS & JS Script on the Downloaded File 
  • Step 6: Now Paste the Script Above on the </body> tag. 
  • Step 7: And, Now Save all Changes on your theme
<!-- youtube Lazy load - Designed by Pixabin.com  -->
&lt;style&gt;
.Pixabin-youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 5px;
}
.Pixabin-youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}
.Pixabin-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;
}
.Pixabin-youtube-player img:hover {
  -webkit-filter: brightness(75%);
  -moz-filter: brightness(75%);
  filter: brightness(75%);
}
.Pixabin-youtube-player .play {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
   background: url(&quot;https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg&quot;) no-repeat;
  cursor: pointer;
}
&lt;/style&gt;

&lt;script type=&#39;text/javascript&#39;&gt;
//&lt;![CDATA[
function labnolIframe(div) {
  var iframe = document.createElement(&quot;iframe&quot;);
  iframe.setAttribute(
    &quot;src&quot;,
    &quot;https://www.youtube.com/embed/&quot; + div.dataset.id + &quot;?autoplay=1&amp;rel=0&quot;
  );
  iframe.setAttribute(&quot;frameborder&quot;, &quot;0&quot;);
  iframe.setAttribute(&quot;allowfullscreen&quot;, &quot;1&quot;);
  iframe.setAttribute(
    &quot;allow&quot;,
    &quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot;
  );
  div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName(&quot;Pixabin-youtube-player&quot;);
  for (var n = 0; n &lt; playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    var div = document.createElement(&quot;div&quot;);
    div.setAttribute(&quot;data-id&quot;, videoId);
    var thumbNode = document.createElement(&quot;img&quot;);
    thumbNode.src = &quot;https://i.ytimg.com/vi/ID/hqdefault.jpg&quot;.replace(
      &quot;ID&quot;,
      videoId
    );
    div.appendChild(thumbNode);
    var playButton = document.createElement(&quot;div&quot;);
    playButton.setAttribute(&quot;class&quot;, &quot;play&quot;);
    div.appendChild(playButton);
    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}
document.addEventListener(&quot;DOMContentLoaded&quot;, initYouTubeVideos);
//]]&gt;
&lt;/script&gt;&lt;/div&gt;

  <!-- youtube Lazy load - Designed by Pixabin.com  -->

  • Step 8: Now open the new post or page on the Blogger 
  • Step 9: Change the HTML Mode on Your Blog Post Or Page 
  • Step10: And Paste the HTML Code on the Downloaded File 
  • Step 11: All Work Finished. Once check your video Element is Working or Not 

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

  • Step12: Replace the VIDEO_ID on the Html Script.

Video Guide👇

Final Words

Thanks for reading the article, I hope this article will help you with the lazy load YouTube embed videos script. So, support our blog, and don't forget to subscribe to our youtube channel.

Post a Comment