image
Trik Untuk Embed Video Youtube Super Ringan di Blog

Trik Untuk Embed Video Youtube Super Ringan di Blog

Video youtube yang kita pasang (embed) di postingan blog merupakan salah satu penyumbang loading halaman terbesar. Padahal video tersebut tidak langsung diputar. Namun tetap saja meskipun tidak terputar secara otomatis, sebuah video yang di embed akan mempengaruhi loading halaman blog. Jika Anda tidak percaya, coba tes di pagespeed salah satu artikel postingan blog yang menyertakan video youtube. Lihat pada bagian aset statis!
Cara embed video youtube ringan

Sebagai pemilik blog atau website, tentu kita tidak ingin jika blog yang kita kelola performancenya buruk. Kita berusaha sebisa mungkin supaya loading blog tersebut menjadi ringan. Jika loading cepat, sudah pasti akan baik di mata google dan pengunjung pun akan betah berlama-lama mengeksplor isi blog kita.

Lantas bagaimana solusi untuk mengatasi loading video youtube yang diembed ini?

Solusinya Anda hanya perlu mengubah sistem embed video youtube yang digunakan di blog. Banyak orang mengatakan bahwa sistem embed ini sama halnya dengan sistem embed google plus. Dimana video yang dishare yang terload hanya sebuah gambar thumbnailnya saja. Tidak termasuk proses loading video. Video baru akan di proses dan loading ketika pengunjung meng-klik tombol putarnya.

Cara mengurangi loading halaman dari embed video youtube


Sebelum menggunakan cara ini, sebaiknya hapus semua css dan script dari template sebelumnya. Kemudian silahkan copy dan paste css berikut sebelum tag </head> atau sesudah tag <head>.

/* Embed Youtube */
.youtube-container{display:block;margin:20px auto;width:100%;max-width:600px}.youtube-player{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!important;left:0;margin:auto!important;max-width:100%!important;width:100%!important;position:absolute;right:0;top:0;height:auto!important}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}

Kemudian copy dan pastekan script berikut sebelum tag </body>.

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

Kemudian untuk memasang videonya gunakan kode pemanggil berikut.

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

Misal jika url video youtubenya seperti ini:
https://www.youtube.com/watch?v=1da0ZBZH40o

Maka yang saya tandai warna merah adalah Video IDnya. Jika penempatan kodenya benar maka hasil akhirnya akan seperti ini.

Sumber: http://www.skipser.com/p/2/p/youtube-video-embed-like-google-plus.html
Advertisement

Baca juga:

Buka Komentar