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...

Resource : http://yabtb.blogspot.com/2011/12/lazy-load-youtube-videos.html - http://www.dte.web.id/2012/05/youtube-lazy-loader.html

44 komentar

iyha tu yg suka share video perlu diterapin biar enteng hahahay

Balas

kang koq komentarnya juga muncul di komentar G+ yha? pdahal saya kan gk nulis komentar pakai form G+

Balas

kalo komentar blogger emang tersinkron ke G+... tapi ngga sebaliknya,kalau nulis di G+ ga muncul di Blogger

Balas

keren coy :D
cocok buat movie blog ini.

Balas

nyimak aja kang :D
http://yoga-tc.blogspot.com/

Balas

ohh gitu, baru tau,,hahahay

Balas

antikk maang , postingannya ngangeninn !!! pengen gw pacarin .. wkwkwk , #rikomendedbuangedth buat para blogger pasang ini plugin ..

nuhun sekali .. sesuatu banget kang ismet .. :-D

Balas

iya , service visitorrr sobbb !!! Pengunjung adalah Raja .. :D

Balas

terus kenapa yah kang? kalo orang komentar di blogger, kan ke input tuh ke komentar G+ , nah komentar blogger yang ke input ke G+ itu gak bisa di reply sama komentar G+ .. :(

plus-plos atuh , kumaha ieu teh karuhun google ! .. mungkin rekomendasi nya cuman pake 1 komentar aja ya kang ? antara pilih komentar G+ / Blogger .. :( biar gak bentrok .. hehe

Balas

kayak raditya dika hehe
kalau gak dipasang kita kudet .. kurang update haha

Balas

iya kang rully ! .. wakakak , kudet kurang kadempet .. :D ,

makasih sebelumnya udah dibilang mirip raditya dika!! hhaa ane ngepeeeennsss banget tuh sama KAKAK raditya dika , menginspirasi pemuda indonesia dengan tingkah laku nya yang super gokil itu .. :D wkwkwk

Balas

hohoh keren kang, andaikan tidak manipulasi :D

Balas

Izin bookmark dulu kang syapa tau nanti perlu :)
Oea, kalau mau buat video promosi jasa di Youtube pakai software apa yang bagus?
Kalau boleh sekalian link download gratisannya :p
Terima kasih sebelumnya.

Balas

haha.. saya baru tahu, ternyata pake jquery :D

Balas

nyimak aja dulu, ane blum terlalu paham.. hehe

Balas

Istilahnya streamingnya jadi lebih lancar ya Kang sewaktu mau membuka videonya.

Balas

saaya hampir ga pernah posting video....

Balas

maaf kang ikutan test doang

Balas

baru tau kang ada trik kayak gini, hehe..
tp saya jarang posting video, saya pelajari saja script-nya kang, ijinnya ya kang :)

Balas

belum pernah pasang Video ke postingan.. :(

Balas

Wah ini sanagt bermanfaat bagi saya yang suka memasang video di blog saya yang lain. terima kasih kang ismet.

Balas

Nah lo ... ada lagi yang baru kan? hehe keren kang .... :D Jadi lebih ringan tampilannya ... :)

Balas

klo ane gak pernah malah :D

Balas

wah bermanfaat mungkin tuh bagi yg suka posting tentang video :D makasih kang...

Balas

canggih JS nya, baru tahu ane kang. hahaha

Balas

ternyata apa aja ada triknya ..
kang ismet ngapunten :D baru singgah lagi.. mohon maaf lahir dan batin #telat :D .

Balas

sammi2... kemana aja atuh ?

Balas

gancang kapanggih nya :)

Balas

betul sob.. ini khusus buat yang sering berbagi video

Balas

betul sob.. apalagi kalau beberapa video dalam satu artikel... jadi lola

Balas

silahkan sob.... lumayan kalau pasang video review :)

Balas

sipp deh.. mampir atuh kang :p

Balas

Ini tutorial yang sangat di butuhkan di blog saya Kang
Ijin, copy script nya, untuk membuat video di blog saya
Agar lebih seo friendly, hatur nuhun Kang Ismet

Balas

Keren ini kang... cocok buat fast loading blog.. apa konsep nya seperti ini yah.. ambil gambar movie dari link tertuju / video yang di maksud, kemudian di tampilkan ke blog hanya gambarnya saja, setelah itu ketika di klik gambar tersebut akan menuju link video yang di maksud.. CMIIW .

terima kasih banyak kang buat tutorialnya, sangat bermanfaat..

Balas

Poskan Komentar


×
Chat