Beranda
fitur template

Cara Membuat Lazyload Youtube di Blogger

letakkan di atas ]]></b:skin>yang di bawah ini . 
.lazy-youtube {

  position: relative;

  padding-bottom: 56.25%;

  height: 0;

  overflow: hidden;

  max-width: 100%;

  background: #000;

  margin: 0px;

  border-radius:8px;

}

.lazy-youtube iframe {
 
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 100;

  background: transparent;

}

.lazy-youtube 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;

}

.lazy-youtube img:hover {

  -webkit-filter: brightness(75%);

  -moz-filter: brightness(75%);

  filter: brightness(75%);

}

.lazy-youtube .play {

  text-align:center;

  height: 72px;

  width: 72px;

  left: 50%;

  top: 50%;

  margin-left: -36px;

  margin-top: -36px;

  position: absolute;

  background: url(&quot;data:image/svg+xml,<svg viewBox='

  0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g><path d='M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z' fill='red'/><path d='M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z' fill='red'/></g></svg>&quot;) center / 72px no-repeat;opacity:0.5;cursor: pointer;}
.lazy-youtube .play:hover {background: url(&quot;data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g><path d='M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z'/><path d='M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z'/></g></svg>&quot;) center / 72px no-repeat;opacity:0.5;cursor: pointer;}
diatas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; 
<script> //<![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("lazy-youtube");
  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_webp/ID/hqdefault.webp".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>
Selanjutnya, buat postingan dan tempel kode html dibawah ini. 
<div class="lazy-youtube" data-id="Url_ID_Youtube"></div>
salin kode nya .
Ganti pada bagian 
Url_ID_Youtube, seperti dibawah ini. https://www.youtube.com/watch?v=0JGnGSQk6FA&feature=youtu.be
posting dengan memakai kode di bawah ini . 
<!--- VIDEO YG TAMPIL --->
<div class="lazy-youtube" data-id="Xi1X9IQl10E"></div>
SUMBER ; https://www.bunghuda.com/2023/07/script-lazyload-youtube.html
✕
Cara Membuat Lazyload Youtube di Blogger
Cara Membuat Lazyload Youtube di Blogger

Harga : *Belum termasuk Ongkos kirim
Pesan via whatsapp Pesan via Email