Kode LazyLoad Youtube Embbed Hanya menggunakan div saja
Kode lazyload Youtube memang sudah banyak dibagikan oleh para blogger-blogger sebelumnya. Namun bagi saya kode tersebut masih memiliki kekurangan, walaupun mampu merangkai sebuah payload (penundaan) tampaknya malahan skrip tersebut yang lambat dimuat dibandingkan dengan iframe videonya sendiri yang terlebih dahulu dirender oleh browser.
Terinpirasi dari skrip lazyload image (ngintip skrip kak igniel) akhirnya saya buatlah skrip ini. Cara kerjanya cukup sederhana kok, dalam hal ini kita tidak menuliskan iframe Youtube embbed secara langsung. Karena jika dituliskan secara langsung biasanya pada browser modern akan langsung merendernya sebelum memuat dan menjalankan kode skrip payloadnya.
Maka dari itu saya merancangnya menggunakan div, kamu cukup perlu menambahkan id video saja pada sebuah div. Dan div tersebut akan diisi dengan sebuah iframe saat pengunjung melakukan aktifitas scrolling halaman. Skrip ini tidak cocok bagi kamu yang konten blognya full video embbed Youtube, karena saya yakin mesin pencari tidak akan bisa mendeteksi keberadaan video.
Untuk tampilan videonya sudah saya buat menjadi responsive menggunakan kode css yang diberikan oleh abang-abang (blogger) sebelumnya. Kalau tidak salah saya mendapatkan kode cssnya di blog kompiajaib.com sudah lama sekali saya lupa hehehe.
Dan tunggu apalagi yuk kita lanjut ke pemasangan, untuk pemasanganya saya ambil langkah universal (umum) agar bisa diterapkan pada website selain blogger. Saya rasa teman-teman yang mampir kesini sudah paham tentang kode blogger jadi tidak perlu saya jelaskan secara detail. Langsung saja masuk ke template html editor.
1. Pastikan pada css / template blogmu ada css dibawah ini, silakan cek terlebih dahulu dengan menggunakan pencarian string cari kelas dibawah ini. Dan bila tidak ada tambahin aja, tambahkan pada bagian sebelum </b:skin>, kalau di website lain kalian bisa menambahkanya di file css atau membuat style baru dengan kode <style>
2. Tambahkan javascript lazyload dibawah ini ke bagian sebelum tag </body>, untuk mencarinya jangan di scroll / manual karena akan memakan banyak waktu. Agar lebih cepat gunakan fitur pencarian teks pada editor kalian.
3. Selanjutnya ke tahap penggunaan, cara penggunaanya cukup mudah. Kamu hanya membutuhkan kode ID video yang ingin dibagikan. Biasanya kode id video itu terdapat pada URL kaya gini https://www.youtube.com/?watch=XXXXX dan XXXXX itu adalah contoh id videonya. Silakan tulis seperti ini cara pembuatan div nya.
Terinpirasi dari skrip lazyload image (ngintip skrip kak igniel) akhirnya saya buatlah skrip ini. Cara kerjanya cukup sederhana kok, dalam hal ini kita tidak menuliskan iframe Youtube embbed secara langsung. Karena jika dituliskan secara langsung biasanya pada browser modern akan langsung merendernya sebelum memuat dan menjalankan kode skrip payloadnya.
Maka dari itu saya merancangnya menggunakan div, kamu cukup perlu menambahkan id video saja pada sebuah div. Dan div tersebut akan diisi dengan sebuah iframe saat pengunjung melakukan aktifitas scrolling halaman. Skrip ini tidak cocok bagi kamu yang konten blognya full video embbed Youtube, karena saya yakin mesin pencari tidak akan bisa mendeteksi keberadaan video.
Untuk tampilan videonya sudah saya buat menjadi responsive menggunakan kode css yang diberikan oleh abang-abang (blogger) sebelumnya. Kalau tidak salah saya mendapatkan kode cssnya di blog kompiajaib.com sudah lama sekali saya lupa hehehe.
Dan tunggu apalagi yuk kita lanjut ke pemasangan, untuk pemasanganya saya ambil langkah universal (umum) agar bisa diterapkan pada website selain blogger. Saya rasa teman-teman yang mampir kesini sudah paham tentang kode blogger jadi tidak perlu saya jelaskan secara detail. Langsung saja masuk ke template html editor.
1. Pastikan pada css / template blogmu ada css dibawah ini, silakan cek terlebih dahulu dengan menggunakan pencarian string cari kelas dibawah ini. Dan bila tidak ada tambahin aja, tambahkan pada bagian sebelum </b:skin>, kalau di website lain kalian bisa menambahkanya di file css atau membuat style baru dengan kode <style>
/* Responsive Youtube Video Iframe */
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe, .video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
2. Tambahkan javascript lazyload dibawah ini ke bagian sebelum tag </body>, untuk mencarinya jangan di scroll / manual karena akan memakan banyak waktu. Agar lebih cepat gunakan fitur pencarian teks pada editor kalian.
<script>
// Lazy Load Video Youtube
function lazyLoadVideo(){
for (var video = document.querySelectorAll('div.tontonan'), i=0; i<video.length; i++){
if (video[i]) {
var objeks = document.getElementsByClassName('tontonan')[i];
objek = objeks.getAttribute('uid');
document.getElementsByClassName('tontonan')[i].innerHTML ='<div class="video-container"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/' + objek + '?rel=1&autoplay=1" width="560"></iframe></div>';
}
}
}
// Jalankan Lazy Video
var lazyvideo=!1;window.addEventListener('scroll',function(){(0!=document.documentElement.scrollTop&&!1===lazyvideo||0!=document.body.scrollTop&&!1===lazyvideo)&&(!function(){lazyLoadVideo();}(),lazyvideo=!0)},!0);
</script>3. Selanjutnya ke tahap penggunaan, cara penggunaanya cukup mudah. Kamu hanya membutuhkan kode ID video yang ingin dibagikan. Biasanya kode id video itu terdapat pada URL kaya gini https://www.youtube.com/?watch=XXXXX dan XXXXX itu adalah contoh id videonya. Silakan tulis seperti ini cara pembuatan div nya.
<div class="tontonan" uid="ID_VIDEO" id="tontonan"></div>Perhatikan, video akan muncul saat halaman di scrolling. Jika halaman kamu pendek tidak akan bisa menggunakan kode ini, sengaja saya buat seperti ini mengikuti gaya igniel yang memuat (meload) hampir semua gambar dan iframe saat halaman di scroll. Kamu boleh menambahkan lebih dari satu div / video.
Untuk sementara kamu bisa pakai, saat ini saya tengah mempelajari bagaimana cara kerjanya skrip amp (Accelerated mobile pages) yang mampu memuat semua skrip dan elemen setelah halaman dimuat (Gilaaakan). Kemungkinan bisa kita gunakan daripada membuat halaman amp di blogger. Kekurangan amp di blogger adalah kesulitan menata iklan dalam artikel, selain itu tidak ada skrip dan css eskternal yang boleh ditambahkan.
Saya membuat / menyusun skrip ini karena saat ini sedang belajar javascript. Dulu sih sukanya program PHP dan Alhamdulilah sudah sedikit menguasai. Saya juga pernah membuat project website, project pertama saya adalah wap guestbook atau cms kaya kaskus. Kemudian project kedua aplikasi ujian online berbasis web, yang ketiga project wap kreasi facebook indo-like.ga, skripnya masih ada sama saya hehehe. Nggak dibagikan takut disalahgunakan, karena skrip tersebut meminta kata sandi FB seseorang untuk mendapatkan akses. Untuk project keempat yaitu wap streaming dan upload video tanpa akun (anonymous). Semua project diatas saya buat menggunakan HP, karena saya tidak pernah punya Laptop/pc makanya saya sebut sebagai wap bukan web 😉
Terimakasih sudah membaca artikel kali ini, semoga apa yang saya sampaikan, dan kode yang saya bagikan bisa bermanfaat bagi kalian. Tidak saya enkripsi agar sama-sama bisa belajar, saya bukan igniel yang suka enkrip kode 🙂