Blog Kang Ismet

Manipulasi Untuk Mempercepat Loading Video YouTube - Bagi sobat yang sering membagikan video baik lagu atau film di blognya, tentunya akan sedikit lambat untuk menampilkan video dari YouTube, karena harus load video yang di iframe atau di embed.

Trik ini bukan mempercepat loading video secara keseluruhan, akan tetapi tampilan awal saja. Cara kerjanya simple, ketika postingan dibuka, maka yang ditampilkan bukan video YouTube melainkan gambar hasil manipulasi jQuery. Video akan diload setelah gambar di klik.

Untuk lebih jelas silahkan lihat demo, sebagai catatan, yang ditampilkan adalah gambar2 dan judul palsu, serta gambar capture video.


Untuk menerapkan trik ini, silahkan ikuti langkah mudahnya :

Langkah 1 : Pasang script jQuery di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Catatan : Apabila sudah ada jQuery pada template sobat, lewati langkah ini. jQuery hanya dipasang 1 saja pada template.

Langkah 2 : Simpan kode ini di atas </body> atau di atas </head>

<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('a.youtube-link').each(function() {
        var yt_url   = this.href,
            yt_id    = yt_url.split('?v=')[1],
            yt_title = $(this).text();
        $(this).replaceWith('<div class="youtube-box" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play"></span></div>');
        $('div.youtube-box').click(function() {
            $(this).replaceWith('<iframe class="youtube-frame" src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1"></iframe>');
        });
    });
});
//]]>
</script>

Langkah 3 : Simpan CSS di atas ]]</b:skin>

.youtube-box,
.youtube-frame {
  display:block;
  width:420px; /* Lebar video */
  height:315px; /* Tinggi video */
  background-color:black;
  background-size:100%;
  position:relative;
  border:none;
  margin:0px auto 15px;
}
.youtube-box span {
  display:block;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}
.youtube-box .youtube-title {
  background-color:rgba(0,0,0,0.4);
  font:bold 15px Verdana,Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 2px black;
  bottom:auto;
  line-height:30px;
  height:30px;
  overflow:hidden;
  padding:0px 15px;
}
.youtube-box .youtube-bar {
  background:black url('http://4.bp.blogspot.com/-7keKvgPlMUA/T7vJpi3X_YI/AAAAAAAACtw/4OUd7uHadDk/s1600/yt-bar-center.png') repeat-x top;
  height:35px;
  top:auto;
}
.youtube-box .youtube-bar .yt-bar-left {
  background:transparent url('http://4.bp.blogspot.com/-WL_y2cwe57k/T7xHS3C8tTI/AAAAAAAACug/xIqhenfa-4o/s1600/yt-bar-left.png') no-repeat top left;
  z-index:4;
  cursor:pointer;
}
.youtube-box .youtube-bar .yt-bar-right {
  background:transparent url('http://1.bp.blogspot.com/-DCNevn4jQx0/T7vJt3X3pjI/AAAAAAAACuA/uIKxoT3685M/s1600/yt-bar-right.png') no-repeat top right;
}
.youtube-box .youtube-play {
  cursor:pointer;
  width:83px;
  height:56px;
  top:50%;
  left:50%;
  margin:-28px 0px 0px -42px;
  background:transparent url('http://1.bp.blogspot.com/-JVqaIffy7Ws/T7vK4-ya81I/AAAAAAAACuI/UCL8Y7G4DqE/s1600/yt-play.png') no-repeat top left;
}
.youtube-box .youtube-play:hover {
  background-position:bottom left;
}

Simpan Template

Cara Penggunaan

Apabila ingin menampilkan video youtube pada postingan, pada mode HTML tulis kode seperti ini :

<a class="youtube-link" href="URL-Halaman-YouTube">Judul Video</a>

contoh :

<a class="youtube-link" href="http://www.youtube.com/watch?v=5EhmPPQKjlg">Ust. Jefry Al Buchory - Bidadari Surgaku</a>

Kelebihan dan Kekurangannya

Kelebihannya :
Dengan menggunaknan manipulasi ini, menurut saya ada beberapa kelebihan diantaranya lebih SEO friendly dan Valid HTML5 karena tidak menggunakan iframe. Untuk lebih sempurna, bisa ditambahkan tag title.

Kekurangannya :
Kalau sobat jeli, diantara kekurangannya semua durasi sama yaitu 0:13 :) Tapi hal ini bisa diperbaiki dengan mengupload gambar lain, dengan durasi yang lebih panjang.

Semoga bermanfaat...