Metode Embed Video Youtube Lebih Baik Pada Website Anda

Tutorial - 27 Sep 2016

Biasanya, ketika akan menampilkan video dari Youtube ke website ataupun blog Anda akan menggunakan fasilitas embed video Youtube. Cara ini tidaklah salah, namun jika di teliti lebih jauh ketika sebuah halaman web/blog yang terdapat video Youtube di akses, browser akan men-download file JavaScript tambahan yang akan memperlambat web/blog Anda. File-file tersebut bahkan tetap di download walaupun pengunjung belum memutar video tersebut. Sangat mubazir bukan ?

Perhatikan gambar dibawah :
Metode Embed Video Youtube Lebih Baik Pada Website Anda

Gambar atas (metode 1) memperlihatkan request yang dilakukan ketika halaman web/blog yang berisi video Youtube (dengan embed standar) diakses. Request yang terjadi mencapai lebih dari 1,5 MB, tentu akan sangat mempengaruhi kecepatan akses halaman web Anda.

Gambar bawah (metode 2) ialah request yang terjadi pada halaman web yang embed video Youtube-nya sudah di optimasi. Lihat, dokumen yang di-download hanya berkisar 28 Kb. Coba bandingkan metode mana yang menurut Anda lebih baik !

Tentu medote 2 jauh lebih baik untuk digunakan pada website/blog Anda. Berikut langkah-langkah untuk meng-embed video Youtube lebih baik pada website/blog Anda.

Langkah 1 – Kode JavaScript

Sisipkan perintah JavaScript berikut pada website Anda. Kode JavaScript ini berisi perintah untuk menampilkan gambar thumbnail video dan menjalankan video hanya ketika di play saja.

 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 = loadThumb(v[n].dataset.id);
            div.onclick = loadIframe;
            v[n].appendChild(div);
        }
    });

function loadThumb(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 loadIframe() {
    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);
}

Langkah 2 – Tambahkan CSS

Selanjutnya tambahkan style CSS untuk menampilkan gambar thumbnail video dan video Youtube secara responsive (mobile friendly).

Baca juga :
Membuat Web Responsive dengan CSS3
Membuat Menu Responsive dengan HTML dan CSS
Perbedaan Desain Web Static, Liquid, Adaptive dan Responsive

.youtube-player{
    position:relative;
    padding-bottom:56.23%;
    height:0;
    overflow:hidden;
    max-width:100%;
    background:#000;
    margin:5px
}

.youtube-player iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:100;
    background:0 0;

}.youtube-player 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-player img:hover{
    -webkit-filter:brightness(75%);
}

.youtube-player .play{
    height:72px;
    width:72px;
    left:50%;
    top:50%;
    margin-left:-36px;
    margin-top:-36px;
    position:absolute;
    background:url(http://i.imgur.com/TxzC70f.png) no-repeat;
    cursor:pointer;
}

Cara Menampilkan Video Youtube Lebih Baik

Terakhir untuk menampilkan video Youtube pada website/blog Anda ialah menggunakan kode berikut :

<div class="youtube-player" data-id="ID-VIDEO"></div>

Misal :

<div class="youtube-player" data-id="Y95B-dZ32uQ"></div>

Hasilnya sebagai berikut :

Selamat mencoba.