Blogger में Lazy Load Embedded Youtube Videos कैसे करें?

हैलो ब्लॉगर ! क्या आपका ब्लॉग Blogger पर बना हुआ है ? अगर हाँ तो ये पोस्ट आपके लिए बहुत ही Important होने वाली है अगर आप अपने Blogger Site में Youtube Videos Embedded करते है। क्योकि मैं इस पोस्ट में आपको बताने वाला हूँ की  Blogger Site में Lazy Load Embedded Youtube Videos कैसे करें? जिससे आपके Blog के Page या Post में Youtube Videos fast Load हो और आपके Blog का Loading Speed Increase भी हो । 

     तो दोस्तों चलिये जानते हैं  Blogger Site में Lazy Load Embedded Youtube Videos कैसे करें? 

How to Lazy Load Embedded YouTube Videos in Blogger?

Default Youtube Videos Embed करने में क्या कमी हैं ?

दोस्तों कितने ब्लॉगर जब कोई Article/Post लिखतें हैं और उन्हे उस Article/Post में कोई Youtube Videos Embed करना होता है तो वो Defaut जो Blogger में Option दिया रहता है वहीं से Add कर देते हैं और उनके Blog Post का Loading Speed Down हो जाता है क्योकि  Youtube Embedded Videos का Code 'iframe ' code  होता है जो Youtube Videos को आपके Post पर  load करने में ज्यादा टाइम लगा देता है अपनी Website की Loading Speed Check करने के लिए निचे दिए link पर Click करें -

PageSpeed Insights

अगर इसकी Size  की बात करे तो या लगभग 500KB - 700KB तक ले सकता है जिसकी वजह से आपकी Website की Loading Speed 30% से 40 % Down हो जाता है।  इसका कारण ये होता है की ये जो Code है ये आपकी Youtube Videos को आपके वेबसाइट के अनुसार Optimize नहीं कर पाता है। 

अगर आपने अपने website को PageSpeed Insights पर check  किया और निचे Image दिखाए गए जैसा Error आ रहा है तो आपको इस पोस्ट में बताये गए Trick को Follow जरूर करना चाहिए इससे आपकी Site की Loading Speed जरूर बढ़ेगा। 

Lazy Load Embedded Youtube Videos Code कैसे काम करेगा?

Lazy Load Embedded Youtube Videos Code आपके पोस्ट में Embedded Youtube Videos को Aapke Website के Page या Post के अनुसार Optimize करेगा और ये आपके पोस्ट में Embedded Youtube Videos को तभी Load करेगा जब आपका Visiter उस Video पर Click करेगा।  

 Blogger Site में Lazy Load Embedded Youtube Videos Code कैसे Add करें?

अपने Blogger Website में Lazy Load Embedded Youtube Videos Code Add करना चाहतें हैं तो आपको ये steps Follow करना है -

• पहले  Blogger Dashboard Open कीजिये । 
• Theme Menu पर क्लिक कीजिये । 
•  Edit HTML Button पर क्लिक कीजिये 
•  </head> tag Search कीजिये 
• अब नीचे दिये गए Code को Copy करके के </head> पहले paste कर दीजिये । 
• अब  Theme को Save कर दीजिये । 

<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>

<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></div> 

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

Example: https://youtu.be/G6BzrLhkDz8

Conclusion: