Script Lazy Load Youtube Untuk Memuat Video Saat Klik

Ketika kamu meng-embed video dari Youtube, kodenya akan langsung berjalan begitu halaman dimuat yang menyebabkan banyak sekali script yang harus dieksekusi. Ini membuat kecepatan waktu muat halaman menjadi menurun.

Kali ini ada script yang bisa membantu untuk mempercepat loading blog, yaitu lazy load video Youtube. Nantinya video baru akan muncul setelah pengunjung melakukan klik. Ini bisa dipakai untuk semua jenis platform blog dan website seperti Blogger, WordPress, Opencart, dan lainnya.

Berbeda dengan script responsive Youtube video yang tidak perlu mengubah penulisan markup apapun, script lazy load Youtube ini mengharuskan kamu untuk meng-embed video dengan penulisan yang berbeda.

1. Struktur HTML

Inilah yang saya maksud dengan perbedaan penulisan. Untuk memasukkan video Youtube harus ditulis dengan format seperti ini.

<div class="ignielYTlazy" data-embed="J7exeEyg-jk">
  <span class="button"></span>
</div>

data-embed: kode embed dari video Youtube.

Misalnya kode embed yang lengkap seperti ini.

<iframe width="560" height="315" src="https://www.youtube.com/embed/J7exeEyg-jk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Ambil akhiran URLnya saja seperti yang saya tandai dan masukkan ke dalam kode HTML data-embed di atas.

2. CSS

Gunanya untuk membuat tampilan menjadi responsif. Tambahkan DI ATAS </style> atau ]]></b:skin>.

/* Youtube Lazy Load by igniel.com */
.ignielYTlazy {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}
.ignielYTlazy img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}
.ignielYTlazy .button {
  width: 68px;
  height: 48px;
  background-color: #333;
  opacity: .8;
  box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
  z-index: 1;
  border-radius: 12px;
}
.ignielYTlazy .button:before {
  content: "";
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #fff;
}
.ignielYTlazy img,
.ignielYTlazy .button {
  cursor: pointer;
}
.ignielYTlazy img,
.ignielYTlazy iframe,
.ignielYTlazy .button,
.ignielYTlazy .button:before {
  position: absolute;
}
.ignielYTlazy .button,
.ignielYTlazy .button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0 );
}
.ignielYTlazy iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

3. jQuery

Lalu tambahkan script ini DI ATAS </body>.

<script> //<![CDATA[
/* Youtube Lazy Load by igniel.com */
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('H b=["\w\c\c\e\u\B\k\k\g\l\t\p\r\h\j\c\j\s\a\p\f\h\l\k\P\g\k","\a\l\s\a\m","\m\d\c\d","\k","\p\Q\e\t","\G\d\m\a\O\o","\u\i\f","\d\c\c\i","\d\e\e\a\o\m","","\w\c\l\n","\d\e\e\a\o\m\E\h","\V\g\G\i\d\l\a\U","\g\t\o\g\a\n\C\h\j\c\j\s\a","\w\c\c\e\u\B\k\k\z\z\z\p\r\h\j\c\j\s\a\p\f\h\l\k\a\l\s\a\m\k","\d\f\f\a\n\a\i\h\l\a\c\a\i\x\v\d\j\c\h\e\n\d\r\x\v\a\o\f\i\r\e\c\a\m\y\l\a\m\g\d\x\v\t\r\i\h\u\f\h\e\a\x\v\e\g\f\c\j\i\a\y\g\o\y\e\g\f\c\j\i\a","\f\n\g\f\J","\a\d\f\w","\p\g\t\o\g\a\n\C\E\n\d\Z\r"];A X(F){$(b[S])[b[W]](A(){H D=b[0]+$(q)[b[2]](b[1])+b[3]+F+b[4];$(q)[b[8]]($(K N())[b[7]](b[6],D)[b[5]]());$(q)[b[R]](A(){$(q)[b[10]](b[9]);$(b[12],{T:b[13],Y:b[14]+$(q)[b[2]](b[1]),I:0,L:b[15],M:b[9]})[b[11]]($(q))})})}',62,68,'||||||||||x65|_0x429b|x74|x61|x70|x63|x69|x6F|x72|x75|x2F|x6D|x64|x6C|x6E|x2E|this|x79|x62|x67|x73|x20|x68|x3B|x2D|x77|function|x3A|x59|_0xc7dex3|x54|_0xc7dex2|x66|var|frameborder|x6B|new|allow|allowfullscreen|Image|x49|x76|x6A|16|18|id|x3E|x3C|17|ignielYTlazy|src|x7A||||||'.split('|'),0,{}));
!function() {
  ignielYTlazy('sddefault');
}(jQuery);
//]]> </script>

Perhatikan sddefault yang saya tandai. Itu adalah kualitas dari gambar thumbnail video. sddefault artinya gambar memiliki kualitas standar dengan resolusi 640×480 pixels. Kamu bisa ganti dengan pilihan sebagai berikut.

Bisa langsung bekerja pada banyak embed sekaligus. Kode lengkap penulisannya seperti ini.

See the Pen Youtube Lazy Load Responsive by Rain (@igniel) on CodePen.

Sudah deh. Sederhana kan cara membuat lazy load Youtube on click ini? Sangat cocok bagi kamu yang mempunyai blog dengan niche yang berhubungan dengan video.

https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos–cms-26743