2 In 1 Lazy Loading Video (Facebook Dan YouTube)

Sekedar informasi, beberapa waktu saya baru saja merilis artikel tentang Lazy Loading Facebook dan Lazy Loading YouTube, bagi kamu yang silahkan klik tautan untuk melihat.

Perlu kamu ketahui bahwa pada dasarnya kedua script lazy loading tersebut merupakan script yang sama, yang berbeda hanya di bagian html dan css nya saja.

Oleh karena di artikel kali ini saya akan mengkombinasikan keduanya menjadi 2 in 1 lazy loading video (facebook dan youtube).

Script 2 In 1 Lazy Loading Video ( Facebook Dan YouTube)

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        if ("IntersectionObserver" in window) {
            var iframes = document.querySelectorAll("iframe.video-lazyload");
            var iframeObserver = new IntersectionObserver(function (entries, observer) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting && entry.target.src.length == 0) {                    
                        entry.target.src = entry.target.dataset.src;
                        iframeObserver.unobserve(entry.target);
                    }
                });
            });

            iframes.forEach(function (iframe) {
                iframeObserver.observe(iframe);
            });
        } else {
            var iframes = document.querySelector('iframe.video-lazyload');

            for (var i = 0; i < iframes.length; i++) {
                if (lazyVids[i].getAttribute('data-src')) {
                    lazyVids[i].setAttribute('src', lazyVids[i].getAttribute('data-src'));
                }
            }
        }
    })
</script>

[ads id="ads1"]

Kode CSS

    .cordial-iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .iframe-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

Cara Memasang 2 In 1 Lazy Loading Video Di Blogspot

Edit HTML template blog anda kemudian pasang script lazy loading video, letakkan tepat di atas kode penutup body </body>.
Kemudian pasang juga kode css dan letakkan di atas atau sebelum kode ]]></b:skin> dalam template blog anda.
Klik Save Theme (Simpan) template blog.

Selanjutnya di postingan blog anda, tambahkan kode embedded berikut ini untuk menyematkan video.

Kode Embed Video Facebook - Untuk menyematkan video facebook gunakan iframe (kode embed) berikut ini untuk mengaktifkan lazy load.

<div class="cordial-iframe-container">
    <iframe class="facebook-video iframe-video video-lazyload" 
        data-src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fweb.facebook.com%2Fkopassus.komandoo%2Fvideos%2F379172693697799"
        frameborder="0"
        allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
        allowfullscreen></iframe>
</div>

Kode Embed Video YouTube - Untuk menyematkan video youtube, gunakan kode embed (iframe) di bawah ini untuk mengaktifkan lazy load.

<div class="youtube-iframe-container">
    <iframe class="youtube-video iframe-video video-lazyload" 
        data-src="https://www.youtube.com/embed/nH6Cn_Hq_mE"
        frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</div>

Terakhir, ganti URL yang digaristengahi dengan URL video FaceBook atau YouTube yang ingin anda sematkan, dengan ketentuan URL video harus berasal dari kode embedded masing-masing plugin.

Selesai, selanjutnya anda hanya perlu memasang kode embed tersebut untuk menyematkan video facebook maupun youtube di postingan-postingan anda berikutnya tanpa harus menginstal script lazy loading video dan css.

Kelebihan 2 In 1 Lazy Loading Video

Selain dapat menjaga performa blog atau website anda tetap optimal, 2 In 1 lazy loading video ini juga memiliki beberapa kelebihan lainnya yakni:

Secara aktif mencegah situs web terdampak oleh sumber daya pihak ketiga yang di sematkan.
Menampilkan video dengan fleksibilitas yang tinggi (responsive di semua ukuran layar).
Hanya butuh satu kali saja penginstalan script 2 In 1 lazy loading, sisanya hanya perlu menambahkan kode embed (iframe) dan mengganti url videonya saja.
2 In 1 lazy loading video dirancang khusus untuk memudahkan anda yang aktif menyematkan video facebook maupun youtube ke situs web.

Jadi sekarang apa lagi, selebihnya silahkan coba dan buktikan sendiri ya, semoga artikel ini bermanfaat dan benar-benar membantu aktivitas blogging anda.

Sampai jumpa kembali di artikel penuh wawasan maupun tutorial menarik lainnya hanya di cordialblogger.com dan jangan lupa follow atau join ke telegram untuk mendapatkan notifikasi terbaru dari blog cordialblogger.

Browser compatibility: Chrome, Edge, Firefox, Internet Explorer, Opera, Safari, Chrome Android, Firefox Android, Opera Android, Safari iOS, Samsung Internet dan WebView Android.