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!
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.
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>.
Kemudian copy dan pastekan script berikut sebelum tag </body>.
Kemudian untuk memasang videonya gunakan kode pemanggil berikut.
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 pada demo jsfiddle ini.
Sumber: http://www.skipser.com/p/2/p/youtube-video-embed-like-google-plus.html
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 pada demo jsfiddle ini.
Sumber: http://www.skipser.com/p/2/p/youtube-video-embed-like-google-plus.html