Lazy Loading Untuk Video Player Facebook

Hallo bloggers, beberapa waktu lalu saya telah mengulas artikel tentang lazy load untuk video player youtube, dan kali ini saya akan mengulas kembali tentang lazy loading yang diperuntukkan ke video player Facebook.

Saya melihat selain youtube, video facebook juga sering disematkan kedalam konten website/blog, terutama situs-situs yang memuat konten viral.

Tetapi seperti biasanya, setelah menyematkan video Facebook kedalam konten (postingan) blog performa website/blog juga akan dipengaruhi yakni bertambahnya waktu dibutuhkan oleh browser untuk merender halaman tersebut.

Lazy Loading Video Player Facebook
Maka dari itu sangat bijaksana jika menambahkan efek lazy loading pada video player Facebook yang disematkan konten agar performa website tetap terjaga.[ads id="ads1"]

Script Lazy Load Video Facebook

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        if ("IntersectionObserver" in window) {
            var iframes = document.querySelectorAll("iframe.cordial-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.cordial-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>

Kode HTML

<div class="facebook-iframe-container">
    <iframe class="facebook-video iframe-video cordial-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>

CSS

<style>
    .facebook-iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .iframe-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

Keterangan

  • Untuk menggunakan lazy loading video player Facebook di atas, kamu tidak perlu merubah kode apapun, kecuali url video yang ingin di sematkan.
  • Url harus berasal dari kode sematan (embedded) iframe video facebook dan bukan url postingan.
  • Jika kamu pemula, silahkan lihat panduan untuk mendapatkan kode embedded video facebook.
  • Setelah kode embedded didapatkan, copy bagian url mulai dari https: hingga ID video, lihat contoh gambar berikut ini.
    Copy URL
  • Jika kode embedded diambil langsung dari video, modifikasi url terlebih dahulu dengan menghapus bagian height (contoh: height=476&) sebelum URL ditambahkan ke kode html lazy loading video player facebook.
  • Selanjutnya, install script lazy loading video player facebook, beserta kode html dan css ke postingan blog anda melalui edit html.

Penutup:

Lakukan analisis atau pengujian performa halaman web anda menggunakan Lighthouse atau Google Pagespeed Insights atau Webdev Measure untuk memastikan lazy loading video player Facebook sudah terinstall dengan benar dan berfungsi dengan baik.

Untuk melihat demo lazy load video player facebook silahkan buka url dibawah ini di browser anda.

Demo: https://cordialdemo.blogspot.com/2022/05/demo-lazy-loading-video-player-facebook.html
Lebih baru Lebih lama
Close