Script Lazy Load Youtube Pure JavaScript tanpa jQuery

Table of Contents

Bagi sobat yang sering membagikan video baik lagu atau film di blognya, tentunya akan sedikit lambat untuk menampilkan video dari YouTube, karena harus load video yang di iframe atau di embed.

Untuk solusi agar lebih cepat diload yaitu menggunakan YouTube Lazy Load. Dengan Lazy Load, hanya akan menampilkan thumbnail Video Youtube, dan iframe akan dimuat setelah di klik

Script yang saya bagikan ini tidak memerlukan jQuery, karena murni menggunakan JavaScript. Script ini bisa dipasang diberbagai flatform seperti Blogger, WordPress, Joomla dll. Yu.. Langsung ke tutorial

Struktur HTML

<div class="youtube" data-embed="PCehl2RwkEI">
    <div class="play-button"></div>
</div>

Kalian tinggal merubah ID video yang akan diembed/diiframe saja. Untuk mendapatkan ID video bisa dilihat di adressbar, seperti gambar berikut

Menambahkan CSS

Untuk membuat tampilan Youtube mebjadi responsive, penambahan Button manipulasi, maka tambahkan CSS ini. Untuk pengguna Blogger simpan di atas </style> atau ]]></b:skin>.

.youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.youtube img {
  width: 100%;
  top: -16.82%;
  left: 0;
  opacity: 0.7;
}
.youtube .play-button {
  width: 68px;
  height: 47px;
  background-color: #ff0000;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  opacity: 0.8;
  border-radius: 10px;
}
.youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 20.0px;
  border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
  cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
  position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

JavaScript

Tambahkan script ini di atas </body>

<script>
//<![CDATA[
( function() {
  var youtube = document.querySelectorAll( ".youtube" ); 
  for (var i = 0; i < youtube.length; i++) {    
    var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";    
    var image = new Image();
        image.src = source;
        image.addEventListener( "load", function() {
          youtube[ i ].appendChild( image );
        }( i ) );
        youtube[i].addEventListener( "click", function() {
          var iframe = document.createElement( "iframe" );
            iframe.setAttribute( "frameborder", "0" );
            iframe.setAttribute( "allowfullscreen", "" );
	    iframe.setAttribute( "allow", "autoplay" );
            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
              this.innerHTML = "";
              this.appendChild( iframe );
        } );  
  };  
} )();
//]]>
</script>

Try it!

Permasalahan Pada Blogger

Hal yang dikeluhkan oleh blogger ketika menggunakan Youtube Lazy Load adalah tidak muncul Thumbnail. Untuk solusinya, tambahkan Thumbnail dari Youtube secara manual. Simpan kode ini sebelum HTML di atas

<noscript><img alt="YouTube" src="https://img.youtube.com/vi/PCehl2RwkEI/sddefault.jpg"/></noscript>

Jangan lupa edit ID Video yang ditandai. Untuk Kode lengkap pemasangan pada Mode HTML (berikut thumbnail) seperti ini

<noscript><img alt="YouTube" src="https://img.youtube.com/vi/PCehl2RwkEI/sddefault.jpg"/></noscript>
<div class="youtube" data-embed="PCehl2RwkEI">
    <div class="play-button"></div>
</div>

Selamat Mencoba !