Cara Terbaik Menyematkan Video Youtube Pada Website

Kalau kalian sering menyematkan video pada website kalian, pasti sering memikirkan bagaimana agar loadingnya cepat dan hemat pemyimpanan, dan tidak sedikit yang akhirnya menjatuhkan piihannya dengan menaruh video mereka pada YouTube, selain gratis, YouTube bisa di bilang jejaring sosial berbasis video yang sangat banyak peminatnya saat ini.

Website Makin Berat

Tapi pasti tidak sedikit dari kalian juga yang merasa loading website kalian makin lama ketika kalian menyematkan video YouTube pada website kalian, belum lagi ketika kita diharuskan menyematkan lebih dari satu video pada satu halaman website. Hal tersebut terjadi karena setiap kita menyematkan 1 buat video kita harus mendownload banyak file Javascript untuk merender video player YouTube. Saya sertakan capture dari load satu halaman website dengan 4 YouTube video.

Cara Terbaik Menyematkan Video YouTube Pada Website
Cara Terbaik Menyematkan Video YouTube Pada Website

Solusi Menyematkan Youtube Tanpa Menambah Beban Website

Terinspirasi dari Google+ yang menyematkan video youtube dengan cara memuat hanya gambar kecil dari video saja, baru akan memanggil video ketika kita memilih / memainkan salah satu video. Jadi bilamana user / pengunjung website kita tidak ingin menonton video tersebut, dia tidak perlu mengunduh file – file javascript dari YouTube.

Ringan dan Responsive

Selain ingin menjadikan halaman ringan, kali ini saya juga menginginkan video tersebut responsive, karena kita ketahui bersama kalau penyematan standart dari youtube kita harus mendefinisikan terlebih dahulu ukuran iframe / video yang akan kita sematkan, nah disini kita juga akan mengoprek bagaimana caranya agar video tersebut responsive di berbagai macam ukuran.

Mari Coding

Nah setelah kita pahami bersama apa yang akan kita optimasi dari YouTube kali ini, mari kita ubah kode penyematan YouTube di website kita.

Kode Standart Penyematan YouTube

<iframe width="560" height="315"
   src="https://www.youtube.com/embed/VIDEO_ID" >
 </iframe>

Dari kode standart di atas,  mari kita ubah menjadi seperti berikut

HTML Kode YouTube Ringan

<div class="youtube-video" data-id="VIDEO_ID"></div>

Selanjutnya, kita buat script yang berguna untuk menyematkan gambar kecil dari video YouTube kita, serta menampilkan iframe ketika ada event klik pada gambar tersebut

<script>
    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });

    function labnolThumb(id) {
        var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }

    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }    
</script>

Sampailah kita pada kode yang terakhir, yaitu bagaimana caranya agak video kita ini bisa responsive nah disinilah tugas dari css


<style>
    .youtube-video {
        position: relative;
        padding-bottom: 56.23%;
        /* gunakan 75% untuk video ber aspecratio 4:3 */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-video img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-video img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-video .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

</style>

Selesai, saatnya mencoba seberapa besar perbedaan kecepatan website kamu setelah melakukan optimasi tersebut :D, dan bila mana ada yang di tanyakan atau kalian punya cara / trik lain dalam menyematkan video YouTube, tulis di kolom komentar ya ^_^.

Leave a Comment

Your email address will not be published. Required fields are marked *