Manipulasi Untuk Mempercepat Loading Video YouTube
0 views
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
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
Langkah 3 : Simpan CSS di atas
Simpan Template
Apabila ingin menampilkan video youtube pada postingan, pada mode HTML tulis kode seperti ini :
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...
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
43 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
terima kasih banyak kang buat tutorialnya, sangat bermanfaat..
Ijin, copy script nya, untuk membuat video di blog saya
Agar lebih seo friendly, hatur nuhun Kang Ismet
kang ismet ngapunten :D baru singgah lagi.. mohon maaf lahir dan batin #telat :D .
tp saya jarang posting video, saya pelajari saja script-nya kang, ijinnya ya kang :)
Oea, kalau mau buat video promosi jasa di Youtube pakai software apa yang bagus?
Kalau boleh sekalian link download gratisannya :p
Terima kasih sebelumnya.
nuhun sekali .. sesuatu banget kang ismet .. :-D
kalau gak dipasang kita kudet .. kurang update haha
http://yoga-tc.blogspot.com/
cocok buat movie blog ini.