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'/>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;
}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><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
