Lazy Load Untuk Video Youtube Di Blog

Menyematkan video youtube di blog bisa menjadi cara untuk memperkaya konten dan juga cara yang baik untuk mempromosikan kanal youtube kita. Namun jika hanya asal menyematkan video tersebut bisa berakibat pada performa blog.

Pada umumnya ketika pemilik blog ingin menyematkan video dari youtube ke dalam blognya mereka langsung menyematkan kode yang disalin dari youtube ke dalam tulisan blog tanpa memberikan perlakuan apapun. Akibatnya, pada saat blog dimuat, maka saat itu internal frame (iframe) dari youtube juga akan dimuat.

Akibatnya blog akan membutuhkan waktu yang lebih lama sampai laman termuat sempurna. Kalau yang belum tahu apa itu iframe, singkatnya adalah html. Jadi laman blog kita yang berupa html akan memuat html lain di dalam body-nya. Makanya pemuatan akan menjadi lebih lama. Untuk ukuran byte yang diperlukan untuk memuat iframe youtube bisa mencapai 2 MB atau bahkan lebih.

Untuk mengatasi hal ini bisa kita akali dengan menggunakan lazy load javascript. Cara kerjanya yaitu script awalnya hanya akan mengunduh gambar thumbnail. Pada area tengah thumbnail akan disediakan tombol play yang ketika diklik akan memicu proses pemuatan  video.

Tentunya cara ini sangat efektif agar video yang disematkan tidak mempengaruhi performa blog. Untuk script lazy load youtube sendiri ada bebera namun script yang dibuat oleh wingkwong ini menjadi pilihan saya karena baris kodenya cukup simpel dan mudah dimodifikasi. Pada script ini saya mengurangi beberapa baris kode yaitu kode pemanggil gambar youtube.

Baca Juga: [100% sukses] Cara Memperkecil Ukuran Video Sebelum Diupload Ke Youtube

Menurut saya gambar thumbnail untuk youtube bisa ditambahkan secara manual agar bisa disematkan atribut "alt" yang membuat konten lebih SEO friendly. Namun jika kalian tidak terlalu perduli dan malas klik-klik lagi cukup mengguanakan script yang original saja.

Untuk pemasangan kode javascript ini bisa langsung disalin di atas kode body template dan untuk melengkapi dan memperbaiki tampilannya, beberapa baris css bisa dipasang pada area skin blog. 

Cara Pemasangan

Silahkan salin kode berikut dan paste/tempel tepat di atas </body>

<script>
//<![CDATA[
!function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}();
//]]>
</script>

Selanjutnya salin kode berikut lalu tempel tepat di atas kode </b:skin>

/*! llyv.css v0.1.0 */ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:20px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0}.llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}

Selanjutnya salin kode dibawah lalu tempel di mana saja di dalam postingan. Jangan lupa masuk ke dalam mode html. Ganti tulisan id-video dengan id video yang ingin kalian semat. Contoh id video seperti yang saya beri warna merah, https://www.youtube.com/watch?v=B961ypoo0I4

<div class="llyv" data-id="id-video">
<img src="https://img.youtube.com/vi/id-video/hqdefault.jpg"/></div>

Jadinya:

<div class="llyv" data-id="B961ypoo0I4">
<img src="https://img.youtube.com/vi/B961ypoo0I4/hqdefault.jpg"/></div>

Untuk yang super malas bisa bisa menggunakan script originalnya. Nantinya markup yang dibuat di dalam postinga cukup satu baris saja. Cara pemasangannya sama dengan langkah di atas.

Javascript

<script> //<![CDATA[ /*! llyv.js v0.1.0 */ !function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i);var l=document.createElement("img");l.src="https://img.youtube.com/vi/"+t[e].dataset.id+"/hqdefault.jpg",t[e].appendChild(l),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}(); //]]> </script>

Css

/* * llyv.css
* Optimizing the performance while loading multiple YouTube videos on the same page
* @license MIT
* @version 0.1.0
* @author Wong, Wing Kam - @wingkwong
* @updated 2018-07-11
* @link https://github.com/wingkwong/lazy-load-youtube-videos
*/ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}

Markup di dalam postingan

<div class="llyv" data-id="id-video">

Semoga bermanfaat...

Referensi Kode:
https://www.npmjs.com/package/lazy-load-youtube-videos