Script Lazy Load Video Youtube Untuk Mempercepat Loading Blog Cara Buat Blog- Script Lazy Load Youtube Untuk Memuat Video Saat Klik

Ketika kau meng-embed video dari Youtube, kodenya akan eksklusif berjalan begitu halaman dimuat yang mengakibatkan aneka macam script yang harus dieksekusi. Ini menciptakan kecepatan waktu muat halaman menjadi menurun.

Kali ini ada script yang dapat membantu untuk mempercepat loading blog, yaitu lazy load video Youtube. Nantinya video gres akan muncul sesudah pengunjung melaksanakan klik. Ini dapat digunakan untuk semua jenis platform blog dan website menyerupai Blogger, Wordpress, Opencart, dan lainnya.

Berbeda dengan script responsive Youtube video yang tidak perlu mengubah penulisan markup apapun, script lazy load Youtube ini mengharuskan kau untuk meng-embed video dengan penulisan yang berbeda.

1. Struktur HTML

Inilah yang aku maksud dengan perbedaan penulisan. Untuk memasukkan video Youtube harus ditulis dengan format menyerupai ini.
<div class="ignielYTlazy" data-embed="J7exeEyg-jk">   <span class="button"></span> </div>
data-embed: arahan embed dari video Youtube.

Misalnya arahan embed yang lengkap menyerupai 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 menyerupai yang aku tandai dan masukkan ke dalam arahan HTML data-embed di atas.


2. CSS

Gunanya untuk menciptakan 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 aku tandai. Itu yaitu kualitas dari gambar thumbnail video. sddefault artinya gambar mempunyai kualitas standar dengan resolusi 640x480 pixels. Kamu dapat 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 eksklusif bekerja pada banyak embed sekaligus. Kode lengkap penulisannya menyerupai ini.

See the Pen Youtube Lazy Load Responsive by Rain (@igniel) on CodePen.



Sudah deh. Sederhana kan cara menciptakan lazy load Youtube on click ini? Sangat cocok bagi kau yang mempunyai blog dengan niche yang bekerjasama dengan video.

https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743
Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours