Add lazy Embed YouTube videos in Blogger

The default YouTube embed is automatically played videos and decrease page speed but if we add lazy Embed YouTube videos that will not be played automatically and also no problem with page speed in this post I am going to give you lazy YouTube embed video code for Blogger.

Paste this code before </body>  tag.

<!--lazy YouTube by Toorzo-Shiva Technic World-->  
<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(&quot;https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg&quot;) 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>
  <!--Lazy YouTube-->

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

And don't forget to replace VIDEO_ID with your YouTube video id.