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 pribadi 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 bab aset statis!
Sebagai pemilik blog atau website, tentu kita tidak ingin kalau blog yang kita kelola performancenya buruk. Kita berusaha sebisa mungkin agar loading blog tersebut menjadi ringan. Jika loading cepat, sudah niscaya 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?
Sebagai pemilik blog atau website, tentu kita tidak ingin kalau blog yang kita kelola performancenya buruk. Kita berusaha sebisa mungkin agar loading blog tersebut menjadi ringan. Jika loading cepat, sudah niscaya 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 dipakai di blog. Banyak orang menyampaikan 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 gres akan di proses dan loading saat pengunjung meng-klik tombol putarnya.
Sebelum memakai cara ini, sebaiknya hapus semua css dan script dari template sebelumnya. Kemudian silahkan copy dan paste css berikut sebelum tag </head> atau setelah tag <head>.
Kemudian copy dan pastekan script berikut sebelum tag </body>.
Kemudian untuk memasang videonya gunakan isyarat pemanggil berikut.
Misal kalau url video youtubenya ibarat ini:
https://www.youtube.com/watch?v=1da0ZBZH40o
Maka yang aku tandai warna merah ialah Video IDnya. Jika penempatan kodenya benar maka hasil balasannya akan ibarat ini.
Sumber: http://www.skipser.com/p/2/p/youtube-video-embed-like-google-plus.html
Sumber https://www.tipsdantrik.web.id/
Cara mengurangi loading halaman dari embed video youtube
Sebelum memakai cara ini, sebaiknya hapus semua css dan script dari template sebelumnya. Kemudian silahkan copy dan paste css berikut sebelum tag </head> atau setelah 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 isyarat pemanggil berikut.
<div class="youtube-container"> <div class="youtube-player" data-id="Video ID"></div> </div> Misal kalau url video youtubenya ibarat ini:
https://www.youtube.com/watch?v=1da0ZBZH40o
Maka yang aku tandai warna merah ialah Video IDnya. Jika penempatan kodenya benar maka hasil balasannya akan ibarat ini.
Sumber: http://www.skipser.com/p/2/p/youtube-video-embed-like-google-plus.html
Sumber https://www.tipsdantrik.web.id/
<div class="youtube-container"> <div class="youtube-player" data-id="Video ID"></div> </div> Misal kalau url video youtubenya ibarat ini:
https://www.youtube.com/watch?v=1da0ZBZH40o
Maka yang aku tandai warna merah ialah Video IDnya. Jika penempatan kodenya benar maka hasil balasannya akan ibarat ini.
Sumber: http://www.skipser.com/p/2/p/youtube-video-embed-like-google-plus.html
Sumber https://www.tipsdantrik.web.id/
