Cara Pasang Lazy Load Untuk Video Youtube Di Blog

Cara Pasang Lazy Load Video Youtube di Blog Menyematkan video you tube di blog bisa menjadi cara untuk memperkaya konten dan juga cara yang baik untuk mempromosikan kanal you tube 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.

you tube

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 akan memicu proses pemuatan video.

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

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 peduli dan malas klik-klik lagi cukup menggunakan script yang orginal 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 ini 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 ini 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 dimana 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://youtu.be/GxE4hYkarXY

<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="GxE4hYkarXY"> 

<img src="https://img.youtube.com/vi/GxE4hYkarXY/hqdefault.jpg"/></div>

Untuk yang super malas bisa menggunakan script orginalnya. Nantinya markup yang dibuat di dalam postingan 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

* @link    https://github.com/wingkwong/lazy-load-youtube-videos
* @updated 2018-07-11


*/ .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

<divclass="llyv" data-id="id-video">