Cara Pasang Lazy Load Untuk Video Youtube Di 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
<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>
/*! 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)}
<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>
/* * 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)}
<divclass="llyv" data-id="id-video">
Posting Komentar untuk "Cara Pasang Lazy Load Untuk Video Youtube Di Blog"