Cara Memasang Lazy Load Youtube di Template Viomagz
Pada umumnya blog hanya berisi konten tulisan berupa artikel. Namun sebenarnya seorang blogger bisa memasukan video dari youtube kedalam artikel di blognya.
Nah dalam artikel kali ini, saya akan membahas seberapa penting video di dalam blog itu, apa manfaat video yang diembed dalam artikel, dan bagaimana cara memasang lazy load video youtube agar loading blog tidak tergganggu.
Perlukah Video di Upload Dalam Artikel?
Tidak semua pengguna internet mudah paham dengan panduan yang dibuat dalam bentuk tulisan. Oleh karena itu membuat video untuk melengkapi artikel dalam blog sangat dianjurkan, agar pengunjung blog yang membaca artikel memiliki pilihan konten mana yang paling mudah untuk diikuti.
Jika dalam sebuah blog ada artikel yang dirasa akan sulit dimengerti oleh pembaca, maka sebaiknya kita masukan video yang berkaitan dengan pembahasan artikel tersebut. Karena selain memberikan pilihan pada pembaca, blog pun akan memiliki nilai plus karena menyediakan banyak opsi.
Apa Manfaat Mengupload Video Dalam Artikel?
1. Memberikan Pengunjung Pilihan
Salah satu manfaat memasukan video kedalam artikel adalah memberikan pengunjung pilihan untuk mengikuti konten yang paling mudah dimengerti.
Selain itu apabila video yang diupload dalam artikel memiliki pembahasan yang lebih lengkap dan mudah dimengerti, maka pengunjung akan merasa senang dengan blog kita.
2. Mendapatkan backlink Gratis
Salah satu hal yang saya lakukan dalam blog ini adalah menerapkan video yang saya upload di youtube pada artikel yang terkait. Contoh artikel yang saya pasangi video dari youtube adalah "Contoh Design Kartu Pelajar" dan "Cara Overclock Xeon X5460".
Video yang saya sematkan dalam artikel tersebut adalah video yang cukup memiliki view banyak di youtube. Sehingga saya mencoba membuat backlink dari video tersebut, dan saya juga berharap ada orang yang masuk ke channel youtube saya lewat video yang ada dalam artikel tersebut.
3. Memberikan Nilai Plus Pada Blog
Manfaat utama dari pemasangan video dalam artikel adalah memberikan nilai plus untuk blog. Tapi ingat bahwa nilai plus tersebut harus datang dari pengunjung. Oleh karena itu sangat penting untuk memasukan video yang berkualitas agar pengunjung betah dalam blog kita, dan mungkin bisa saja berlangganan pada blog kita.
Lazy Load Youtube ala Ignil.com
Lazy load youtube yang akan saya bagikan kali ini adalah sebuah script lazy load yang saya dapatkan dari blog mbak Ignil yaitu ignil.com.
Beliau menjelaskan bahwa memasang lazy load youtube cukup penting bagi blogger yang suka men-gembed video pada artikelnya. Perlu anda ketahui bahwa saat kita meng-embed sebuah video Youtube dalam artikel, maka saat artikel dimuat secara otomatis kode embed video tersebut akan langsung berjalan dan menambah beban loading halaman.
Oleh karena itu lazy load youtube cukup penting untuk dipasang dalam blog agar tidak mengganggu loading halaman.
Cara Memasang Lazy Load Youtube di Blog
Berikut ini adalah beberapa langkah yang harus dilakukan sebelum memasang script lazy load youtube pada template viomagz.
- Buka dashboard blogger
- Pilih menu
- Pilih edit HTML
Cari dan letakan kode CSS dibawah ini diatas kode ]]></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;
}Baca: Lazy Load Analytic Untuk Mempercepat Loading Blog
Tambahkan kode jQuery dibawah ini setelah </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>Setelah selesai, klik save theme.
Untuk mengimplementasikan lazy load youtube ini dalam artikel, maka gunakan script iframe dibawah ini dalam penulisan mode HTML.
Lazy Load Youtube
<div class="ignielYTlazy" data-embed="J7exeEyg-jk"> <span class="button"></span> </div>
Perhatikan kode embed yang saya tandai dengan warna oranye. Ganti kode tersebut dengan kode embed video youtube anda.
Cara Mendapatkan Kode Embed Video Youtube
- Buat Postingan baru
- Pilih mode HTML
- Pilih Sisipkan video
- Pilih Youtube
Apabila email yang anda gunakan terhubung dengan channel Youtube, maka secara otomatis video dalam channel anda akan tampil, dan anda tinggal memilihnya saja.
Namun apabila anda memiliki dua channel atau email yang digunakan berbeda dengan blog anda, maka silahkan pilih penelusuran dan cari nama channel anda.
Setelah ditemukan, semua video dalam channel anda akan tampil. Anda tinggal memilih satu atau beberapa video dengan cara di klik, lalu tekan tombol pilih.
Setelah itu akan muncul kode iframe kurang lebih seperti ini.
<div class="separator" style="clear: both; text-align: center;">
<iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="2MaFYekgbJ4" width="400" height="322"
src="https://www.youtube.com/embed/2MaFYekgbJ4"></iframe></div>Kode embed yang saya tandai warna kuning adalah kode video youtube-nya. Silahkan anda gunakan cara yang sudah saya jelaskan ini untuk mendapatkan kode embed video youtube anda sendiri. Setelah itu masukan kode embednya pada script lazy load youtube di atas.
Prinsip kerja lazy load youtube buatan mbak Ignil ini adalah video youtube yang di embed dalam artikel hanya akan tampil setelah pengunjung melakukan klik pada video nya.
Memang keren sih mbak Ignil.
Nah apabila anda kurang yakin dengan kode lazy load youtube yang saya bagikan ini, maka silahkan anda temukan kodenya langsung di blog sang pembuat.
Sumber: https://www.igniel.com/2018/11/lazy-load-youtube.htmlUpdate:
Beberapa waktu yang lalu saya menemukan masalah thumbnail video tidak muncul ketika mengembed video Youtube menggunakan script lazy load ini. Tetapi masalah tersebut sudah bisa di fix dengan cara yang sederhana.
Silahkan baca artikel cara fix thumbnail video lazy load youtube.
Nah itulah tutorial cara memasang lazy load youtube di template viomagz.
Semoga bermanfaat.
Posting Komentar