Hal ini tentunya menguntungkan, yang diload sementara hanyalah thumbnail video saja, selebihnya hanyalah hasil manipulasi, sehingga akan lebih ringan. Video akan ditampilkan setelah gambar / image tersebut diklik. Kurang lebih seperti itu lah konsepnya.
Sebetulnya ini hanya pembaharuan dari artikel sebelumnya (Baca : Manipulasi untuk mempercepat loding video Youtube). Hanya saja pada artikel tersebut video belum responsive. Saya buat responsive sesuai dengan perkembangan zaman.
Beberapa keuntungan Youtube Lazy Load :
- Lebih cepat diload
- Custom Title / Judul bisa dibuat sesuka hati, sebelum video ditampilkan.
- Valid HTML5
- Lebih SEO Friendly
- Responsive
Apabila sobat tertarik memasangnya, silahkan ikuti langkah mudahnya :
1. Pasang Framework jQuery diatas
</head>
, abaikan langkah ini apabila sudah ada<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
2. Simpan script ini diatas
</body>
atau di atas </head>
<script type='text/javascript'>
//<![CDATA[
// Original Script by DTE :]
// Optimized and Modified by Kang Ismet
$(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"><img class="youtube-img" src="http://img.youtube.com/vi/' + yt_id + '/0.jpg" alt="youtube" ></img><span class="gradient"></span><span class="youtube-title">' + yt_title + '</span><span class="youtube-play"></span></div>');
$('div.youtube-box').click(function() {
$(this).replaceWith('<div class="youtube-frame"><div class="videoWrapper"><iframe src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>');
});
});
});
//]]>
</script>
3. Simpan CSS diatas
]]</b:skin>
.youtube-box {
text-align:center;
background-color: black;
width: 640px;
max-width: 100%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.youtube-frame {
background-color: black;
width: 640px;
height: auto;
max-width: 100%;
text-align: center;
margin: 0 auto;
}
.youtube-img {
position: relative;
height: 100%;
width: 100%;
margin-top: -7%;
margin-bottom: -8.5%;
transform: scale(1.1);
}
.youtube-box span {
display:block;
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.youtube-box .gradient {
background: transparent url('http://1.bp.blogspot.com/-QtFxtA8Fmp8/ViUWz6Dt3SI/AAAAAAAAG_M/0Kk29wYynsU/s1600/gradient.png') repeat-x top left;
}
.youtube-box .youtube-title {
background: transparent url('http://3.bp.blogspot.com/-pp7s5v5KeBI/ViUW0EI5ClI/AAAAAAAAG_Q/vRLq1Oet22Q/s1600/t-title-bg.png') no-repeat 98% 50%;
font:normal 19px Arial,Sans-Serif;
color:white;
text-shadow:0px 1px 2px black;
bottom:auto;
line-height:40px;
height:40px;
overflow:hidden;
padding:0px 15px;
text-align: left;
}
.youtube-box .youtube-play {
cursor:pointer;
width:74px;
height:52px;
top:50%;
left:50%;
margin:-26px 0px 0px -40px;
background:transparent url('http://4.bp.blogspot.com/-Vj3xOT3Jiis/ViPsv-_82rI/AAAAAAAAG-Q/3jc6mgYR5f4/s1600/yt-play-new.png') no-repeat top left;
}
.youtube-box .youtube-play:hover {
background-position:bottom left;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Untuk menggunakannya, ganti url Youtube dan Judul dengan video yang ingin di tampilkan :
<a class="youtube-link" href="https://www.youtube.com/watch?v=CevxZvSJLk8" rel="nofollow">Katy Perry - Roar</a>
Bagi sobat yang menginginkan tampilan dengan tab, seperti screenshoot di bawah, caranya sama seperti diatas, hanya saja ganti Script dan CSS.
Contoh manipulasi dengan tab player
Semoga bermanfaat...