Script Lazy Load Youtube Untuk Memuat Video Saat Klik

Script Lazy Load Video Youtube Untuk Mempercepat Loading Blog

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 640x480 pixels. Kamu bisa ganti dengan pilihan sebagai berikut.

NilaiKeterangan
mqdefault Medium Quality (320×180 pixels)
hqdefault High Quality (480×360 pixels)
sddefault Standard Definition (SD) (640×480 pixels)
maxresdefault Maximum Resolution (1920×1080 pixels)

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

Artikel Terkait

12 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Max Ikhsan
    29 Juni, 2022
    Profil: https://www.blogger.com/profile/05188570730581861786
    Mantap, work 100% di blog aku, makasih mbak ignil.
  • bernadsetup
    05 April, 2021
    Profil: https://www.blogger.com/profile/12364100985660654382
    thumnail jadi gak muncul ya gan kalo pake lazyload, soalnya saya blog video jadi thumnail utama dari youtube
  • Admin
    03 Desember, 2020
    Profil: https://www.blogger.com/profile/16375346131206494858
    Saya menggunakan template linkmag*, kok cuma kotak hitam dan ada tombol saja kak, pas di klik tdak efek apa". Mksh
  • Anonim
    Anonim 14 November, 2020
    Yah ka..mungkin salah penempatannya yah..
    Hanya tombol hitam aja yang muncul
  • Admin
    03 Juni, 2020
    Profil: https://www.blogger.com/profile/04325225838604029639
    biar bisa embed dari url selain youtube gimana mbak igniel? Ada tutor nya gk?
  • Arif Santoso
    08 Maret, 2020
    Profil: https://www.blogger.com/profile/03365865900593576473
    aku coba di template premium buatannya mbak ignel (igniplex) kok malah ngga bisa :')

    cuma muncul kotak hitam dan ada tombol play-nya, tapi pas di klik ngga ada reaksi sama sekali
    • Igniel
      09 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sudah fixed ya. Ini karena mas salah meletakkan kodenya.
  • I Gusti Bagus Sudiantara
    28 Januari, 2020
    Profil: https://www.blogger.com/profile/09499059397651038806
    Terima kasih, informasi yang sangat membantu, mohon ijin menggunakannya. Setelah tes analisis page speednya semakin bagus.
  • Danny
    23 Februari, 2019
    Profil: https://www.blogger.com/profile/00248156656490909948
    Itu caranya kan ada 3 (Html, css, jquery). Harus dipasang semua atau hanya pilih salah satu?
  • Unknown
    09 November, 2018
    Profil: https://www.blogger.com/profile/14183469588647462245
    mantappp