How to Embed and Lazyload Youtube video

Also Read

How to embed and lazyload youtube video

Do you want to increase the engagement of your audience with your blog?  Do you want to decrease your Bounce rate?

If yes then this simple trick will help you to increase the engagement as well as decrease the bounce rate of your blog.

Nowadays people prefer videos over written content,  safe you combine your blog with YouTube videos then you can take your blogging journey to the next level.

In this article I will tell you  how to add YouTube videos in blogger and how to do easy load YouTube videos so that it doesn't harm your blog performance. 

Embedding videos in your blog is one of the most successful way to combine your content marketing and YouTube videos.  

When you embed videos in your article, the content becomes more engaging. And according to a research, blog posts which have videos embedded, generates more inbound links and an increased viewership. And this reason is enough for you to embed youtube videos in Blogger blog.

So, I will be sharing first, the traditional method which is the most easiest and fastest method and then  the new method which requires you to add few codes.

Traditional method to embed YouTube videos in Blogger

Method 1 

  1. Open the YouTube video which you want to embed.
  2. Click on share button and then select embed
  3. Paste the selected code in your post.
embed YouTube videos in Blogger using share video option

Method 2

  1. Open your blog post.
  2. Click on video button 
  3. Select Youtube
  4. Click on search and enter your Youtube video URL
Embed Youtube video in Blogger using add video option

Lazy load Youtube video embed in Blogger 

Follow the below steps carefully to enable lazy load YouTube videos in Blogger

  1. Log into your Blogger
  2. Select "Theme" and click on "Dropdown icon beside Customizethen Click on "EDIT HTML".
  3. Paste the below CSS just before </head> tag.


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

  1. Add then, paste below script just before </body> tag.

<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>
  1. Click on save and exit.
  2. Open the post where you want to embed Youtube video and select HTML view
  3. Paste the below HTML code and replace Video ID with your Youtube video ID
<div class="youtube-player" data-id="VIDEO_ID"></div>
That's it. You have successfully embeded Yotube video with lazy load in Blogger.

Conclusion

Embedding YouTube videos is great for content  marketing strategy.  but adding videos can also add extra load time to your blog. So lazy loading YouTube videos is the best solution to embed YouTube videos in blogger.
I hope this method helps you. In case, you find any difficulties, do comment down below.  I would love to help you.

Farhan

Hello there, My Name is Farhan and Welcome To My Website. My Passion is to Share Knowledge With Everyone. Also I am a Larner.

It's all about friendly conversation here at Small Review :) . I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Post a Comment (0)
Previous Post Next Post