Ketika anda meng-embed video dari Youtube ke blog, 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.
Langkah-langkah Memasang Lazy Load Video YouTube di Blogger:
1. Struktur HTML
Untuk memasukkan video Youtube harus ditulis dengan format seperti ini.
<div class="ilmuYTlazy" data-embed="J7exeEyg-jk">
<span class="button"></span>
</div>Ganti kode yang diwarnai menggunakan kode video youtube anda, 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>
Maka ambil kode akhiran URLnya saja seperti yang saya tandai dan masukkan ke dalam kode HTML data-embed di atas.
2. CSS
Masukan kode css berikut untuk membuat tampilan menjadi responsif. Tambahkan DI ATAS </style> atau ]]></b:skin>.
/* Youtube Lazy Load by ilmuinternet.com */
.ilmuYTlazy {
background-color: #000;
margin-bottom: 30px;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
}
.ilmuYTlazy img {
width: 100%;
top: -16.84%;
left: 0;
opacity: 0.7;
}
.ilmuYTlazy .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;
}
.ilmuYTlazy .button:before {
content: "";
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
}
.ilmuYTlazy img,
.ilmuYTlazy .button {
cursor: pointer;
}
.ilmuYTlazy img,
.ilmuYTlazy iframe,
.ilmuYTlazy .button,
.ilmuYTlazy .button:before {
position: absolute;
}
.ilmuYTlazy .button,
.ilmuYTlazy .button:before {
top: 50%;
left: 50%;
transform: translate3d( -50%, -50%, 0 );
}
.ilmuYTlazy iframe {
height: 100%;
width: 100%;
top: 0;
left: 0;
}3. jQuery
Lalu tambahkan script ini DI ATAS </body>.
<script> //<![CDATA[
/* Youtube Lazy Load by ilmuinternet.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|ilmuYTlazy|src|x7A||||||'.split('|'),0,{}));
!function() {
ilmuYTlazy('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.
| Nilai | Keterangan |
|---|---|
| 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) |
Demikian cara optimasi video youtube di blog menggunakan script lazy load. Semoga bermanfaat dan membantu anda yang ingin meringankan loading video youtube di blog dengan kode script tersebut.