To lazyload YouTube videos in Blogger follow the below steps. 
 

Step-1: Go to Blogger dashboard > theme > Edit HTML 

 

Step-2: Now search for tag. 

 

Step-3: Copy the below CSS & JS code and paste it above the tag & save it.


HTML 
<p><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/archive/0/09/20211015074810%21YouTube_full-color_icon_%282017%29.svg&quot;) no-repeat;
  cursor: pointer;
}.youtube-player .play:hover {background: url(https://upload.wikimedia.org/wikipedia/commons/8/8b/YouTube_dark_icon_%282017%29.svg) no-repeat;}
</style>

<script>
//&lt;![CDATA[
function labnolIframe(div) {
  var iframe = document.createElement(&quot;iframe&quot;);
  iframe.setAttribute(
    &quot;src&quot;,
    &quot;https://www.youtube.com/embed/&quot; + div.dataset.id + &quot;?autoplay=1&amp;rel=0&quot;
  );
  iframe.setAttribute(&quot;frameborder&quot;, &quot;0&quot;);
  iframe.setAttribute(&quot;allowfullscreen&quot;, &quot;1&quot;);
  iframe.setAttribute(
    &quot;allow&quot;,
    &quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot;
  );
  div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
  var playerElements = document.getElementsByClassName(&quot;youtube-player&quot;);
  for (var n = 0; n &lt; playerElements.length; n++) {
    var videoId = playerElements[n].dataset.id;
    var div = document.createElement(&quot;div&quot;);
    div.setAttribute(&quot;data-id&quot;, videoId);
    var thumbNode = document.createElement(&quot;img&quot;);
    thumbNode.src = &quot;https://i.ytimg.com/vi_webp/ID/hqdefault.webp&quot;.replace(
      &quot;ID&quot;,
      videoId
    );
    div.appendChild(thumbNode);
    var playButton = document.createElement(&quot;div&quot;);
    playButton.setAttribute(&quot;class&quot;, &quot;play&quot;);
    div.appendChild(playButton);
    div.onclick = function () {
      labnolIframe(this);
    };
    playerElements[n].appendChild(div);
  }
}
document.addEventListener(&quot;DOMContentLoaded&quot;, initYouTubeVideos);
//]]&gt;
</script>

 </p>

Step-4
: Now open the HTML view of the Blog post and paste the HTML code.
HTML 
<p><div class="youtube-player" data-id="VIDEO_ID"></div></p>

Step-5: Replace the YouTube video id in the above HTML code.

Now your lazyloaded YouTube iframe is embedded in your blogger website.