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

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

 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 कैसे करें? 

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 जरूर बढ़ेगा। 

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

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 कर दीजिये । 

Copy the below Code: Lazy Load Embedded Youtube Videos Code

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



अब आपको अपने Blog के Post/Article लिखते समय  इसको HTML View मे Open करना है और Youtube Video को Show कराने के लिए नीचे दिये गए Code को Copy करना है 

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


इसमे VIDEO_ID की जगह आप जो Youtube  Videos Embed करना चाहते हैं उस Video का सिर्फ Id Copy करके Paste करना है । 

Example: https://youtu.be/G6BzrLhkDz8

ऊपर Link मे जिसे Colour किया गया है वो VIDEO_ID है

अब आप Preview कर के देख सकते है ।  


Conclusion:


तो दोस्तो आपको समझ मे आ गया होगा की  Blogger Site में Lazy Load Embedded YouTube Videos कैसे करें? ऊपर बताए ठीक से Follow करने पर भी कोई Problem आ रहा हो तो आप हमे comment कर सकते हैं ।

उम्मीद करता हूँ आप लोगों को ये पोस्ट पसंद आया होगा और अगर आपके मन में कोई सवाल है या सुझाव है तो हमे Comment मे जरूर बताइएगा और हमारे Youtube Channel को भी Join कर लीजिये । 

Comments