Download this Safelink Theme. Download now!
Home
blogging
Home

Youtube Video Lingking Blogger post easy | online web

4 min read

 Hello Blogger! Is your blog created on Blogger? If so, this post is going to be very important for you. Blogger embeds youtube videos on site because in this post I am going to tell you how to load lazy embedded youtube videos on blogger site? Due to which YouTube videos load quickly on the pages or posts of your blog and you also need to increase the loading speed of your blog.


So friends, let's not know how to load lazy embedded youtube videos on blogger site?

How to load lazy embedded youtube videos on blogger site?

 

How to load lazy embedded youtube videos on blogger?

What are the disadvantages of embedding default YouTube videos?

Friends, when many bloggers write an article / post and they have to embed any youtube video in that article / post, they add defaults to the blogger from there and the loading speed of their blog post goes down. YouTube embedded video code is 'iframe' code which takes longer to load youtube videos in your post, to check the loading speed of your website, click on the link given below -

PageSpeed ​​Insight

If we talk about its size, it can take up to 500KB - 700KB, which reduces the loading speed of your website by 30% to 40%. This is because this code is not able to optimize your Youtube videos according to your website.

If you have your website PageSpeed ​​Insight but if the error like the image below is coming, you must follow the strategy mentioned in this post, it will definitely increase the loading speed of your site.

What are the disadvantages of embedding default YouTube videos?

 

How does lazy load embedded youtube video code work?

Lazy load embedded youtube video code will optimize youtube videos embedded in your post according to website page or post and it will load embedded youtube videos in your post when your viewers click on that video.

How to add lazy load embedded youtube video code on blogger site?

If you want to add lazy load embedded youtube video code to your blogger website, you need to follow these steps -

নিচের কোড কপি করুন: অলস লোড এমবেডেড ইউটিউব ভিডিও কোড

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

 

এখন আপনার ব্লগ পোস্ট/নিবন্ধ এই লেখার সময় এইচটিএমএল ভিউ আমাকে এটি খুলতে হবে এবং Youtube ভিডিও দেখানোর জন্য নিচের কোডটি কপি করতে হবে।

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

এই VIDEO_ID আপনি যে ইউটিউব ভিডিওগুলি এম্বেড করতে চান তার পরিবর্তে শুধুমাত্র সেই ভিডিওর ভিডিও আইডি কপি করেছে পেস্ট করুন করতে .

উদাহরণ: https://youtu.be/G6BzrLhkDz8

উপরের লিঙ্কে যে রঙটি দেওয়া আছে তা হল VIDEO_ID হয়

Now it's your turn to preview .

Conclusion:

So guys, you must have figured out how to load lazy embedded youtube videos on blogger site? If you encounter any problems after following the above instructions correctly, you can leave us a comment.

I hope you guys liked this post and if you have any questions or suggestions you must let us know in the comments and also join our youtube channel do it




Post a Comment