Cara Embed Video YouTube Responsive, Ringan & Tidak Berat

Cara embed video YouTube responsive, lebih efisien dan tidak berat. Ketika Anda meng-embed setiap video YouTube pada website menggunakan IFRAME standar, Anda mungkin akan terkejut jika mengetahui berapa banyak berat beban website Anda akan bertambah pada halaman yang ada videonya tersebut. Halaman website setidaknya harus men-download sekitar 0,5 MB (552 KB) resource tambahan (CSS, Javascript dan gambar) untuk rendering pemutar video (video player) buatan YouTube dan file tersebut akan di download meskipun para pengunjung tidak memutar video YouTube tersebut, duh mubazir banget kan..

resource youtube

Gambar 1: Load IFRAME Youtube Video Player

Video yang di embed membuat halaman website menjadi berat dan browser pengunjung juga akan perlu untuk membuat beberapa permintaan (request) HTTP untuk merender video player YouTube. Ini tentu akan meningkatkan waktu loading keseluruhan halaman web Anda sehingga mempengaruhi skor kecepatan halaman (misalnya jika di cek dengan Google Speed Insight atau Pingdom). Kelehaman lain jika kita embed dengan cara standar adalah video tersebut tidak akan responsive, jadi jika dibuka pada layar yang lebih kecil kemungkinan video tersebut akan merusak tampilan website Anda, karena video tidak otomatis mengikuti lebar layar.

Load video player Youtube ketika dibutuhkan saja

Google Plus menggunakan solusi yang cukup cerdas untuk mengurangi waktu yang dibutuhkan muatan awal video player YouTube dan kita dapat menggabungkan pendekatan yang sama pada website kita.

Daripada mengembed video player YouTube secara keseluruhan, Google+ menampilkan hanya gambar thumbnail dari video YouTube dan menempatkan ikon “Play” diatas gambar video tersebut sehingga tampak seperti sebuah pemutar video.

Ketika pengunjung menekan tombol “Play”, thumbnail video diganti dengan pemutar video YouTube standar dengan autoplay di set menjadi 1, sehingga video langsung dimainkan. Dengan cara ini maka sumber daya tambahan yang dibutuhkan oleh video player YouTube tersebut hanya akan diambil ketika user memang ingin menonton video, jika tidak maka resource tidak akan dimuat.

Biasanya kode embed untuk sebuah video YouTube adalah seperti berikut ini, Anda bisa menentukan tinggi dan lebar dalam pixel, serta terdapat juga ID unik dari video YouTube tersebut.

<iframe width="320" height="180" 
     src="http://www.youtube.com/embed/iWZM7dNTokY">
</iframe>

Cara embed video YouTube secara responsive tanpa menambah waktu loading

Kita akan sedikit membuat perubahan pada load video YouTube secara on-demand ini karena kita ingin membuatnya lebih responsive (menyesuaikan ukuran layar, selain itu kode embed IFRAME nya hanya akan ditambahkan ketika pengujung melakukan klik pada tombol “Play” yang ada diatas gambar thumbnail.

Anda bisa copy-paste potongan script berikut ini dimana saja Anda ingin memunculkan video YouTube di halaman website Anda. Jangan lupa untuk mengganti VideoID dengan ID video YouTube yang Anda inginkan. Kode CSS dan Javascript ditambahkan ke template secara terpisah. Selain itu Anda juga tidak perlu untuk mengatur tinggi dan lebar video karena dengan ini maka secara otomatis lebarnya akan mengikuti layar dan tingginya akan menyesuaikan secara proporsional.

<div class="youtube-container">
	<div class="youtube-player" data-id="iWZM7dNTokY"></div>
</div>

Anda dapat copy-paste beberapa blok video dengan ID video YouTube berbeda-beda maupun sama dalam satu halaman. Kodenya akan tetap sama namun hanya berbeda pada bagian VideoID saja.

Javascript

Fungsi Javascript ini akan melakukan scanning halaman website untuk mengembed video YouTube. Apabila ditemukan, maka akan menambahkan gambar thumbnail yang sesuai dan juga menambahkan event onclick yang akan menyulap video thumbnail menjadi video YouTube yang autoplay.

<script>
(function() {
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = JWTubeThumb(v[n].dataset.id);
        p.onclick = JWTubeIframe;
        v[n].appendChild(p);
    }
})();
 
function JWTubeThumb(id) {
    return '<img class="youtube-thumb" src="http://i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
 
function JWTubeIframe() {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "http://www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);
}
</script>

CSS

Buka file CSS dari website Anda dan tambahkan potongan script CSS berikut ini. Jika Anda tidak memiliki file CSS terpisah, maka Anda juga dapat menambahkan kode ini di tag HTML tepatnya sebelum tag </head> pada template Anda.

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; border:1px solid #000; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { 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; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

Motode ini akan mengurangi ukuran halaman web Anda sekitar 300-500 KB dan membuat website Anda lebih mobile-friendly karena .

Hasil dan Demo

embed youtube responsive

Gambar 2: Hanya 3,93 KB dan melakukan 3 request saja

Dengan cara tersebut beban awal yang di load website akan lebih ringan karena hanya akan melakukan request awal ke server sebanyak 3 kali untuk mengambil gambar dan file HTML. Coba bandingkan Gambar 2 dengan Gambar 1, terlihat dengan cara ini resource yang di load hanya 39,3 KB, sedangkan sebelumnya 552 KB. Sangat menghemat resource dan membuat waktu load website jadi lebih cepat tentunya

DOWNLOAD SCRIPT

Sumber: www.jurnalweb.com

Leave a Reply

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