Breaking News

Seo

Script Lazy Load Youtube Untuk Memuat Video Saat Klik

Script Lazy Load Video Youtube Untuk Mempercepat Loading Blog

1. Struktur HTML

Inilah yang saya maksud dengan perbedaan penulisan. Untuk memasukkan video Youtube harus ditulis dengan format seperti ini.
			<div class="ignielYTlazy" data-embed="J7exeEyg-jk">

<span class="button"></span>

</div>data-embed: kode embed dari video Youtube.

			<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 seperti yang saya tandai dan masukkan ke dalam kode HTML data-embed di atas.

dua. CSS

Gunanya untuk membuat 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;

tiga. 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 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.

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 pribadi bekerja dalam poly embed sekaligus. Kode lengkap penulisannya seperti ini.

Https://webdesign.Tutsplus.Com/tutorials/how-to-lazy-load-embedded-youtube-videos--cms-26743

Sudah deh. Sederhana kan cara membuat lazy load Youtube on click ini? Sangat cocok bagi kamu yang memiliki blog menggunakan niche yg berhubungan dengan video.

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

Misalnya kode embed yang lengkap misalnya ini.

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.

Kali ini terdapat script yg mampu membantu buat mempercepat loading blog, yaitu lazy load video Youtube. Nantinya video baru akan muncul sehabis pengunjung melakukan klik. Ini sanggup digunakan buat semua jenis platform blog dan website misalnya Blogger, Wordpress, Opencart, dan lainnya.

Ketika kamu meng-embed video menurut Youtube, kodenya akan pribadi berjalan begitu halaman dimuat yg menyebabkan poly sekali script yang wajib dieksekusi. Ini menciptakan kecepatan saat muat halaman sebagai menurun.

Script Lazy Load Youtube Untuk Memuat Video Saat Klik Reviewed by Andi Leangle on Agustus 01, 2020 Rating: 5

Tidak ada komentar:

All Rights Reserved by Belajar Seo Dan Link © 2017
Powered By Blogger, Share by Andi Leangle

Hubungi Kami

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.