Ditulis oleh: Ditulis pada: 2/04/2014
Seiring dengan makin berkembangnya era responsive di dunia internet, maka satu hal yang perlu mengikuti perkembangan zaman adalah embed video pada website. Salah satu website yang menyediakan embed video untuk disimpan di website adalah Youtube.
Nah kali ini saya akan share modifikasi tampilan video Youtube yang responsive, valid HTML5, dan juga seo friendly.
Sebenarnya beberapa waktu yang lalu saya sudah share cara memodifikasi tampilan video Youtube ini, namun videonya belum responsive, untuk mengingatnya kembali silahkan simak postingannya pada link di bawah ini.
Nah kali ini kita akan menambahkan sedikit kode agar videonya menjadi responsive dan modifikasi yang dipakai yaitu modifikasi pada link kedua yaitu Modifikasi Tampilan Video Youtube Di Blog.
Agar tampilannya tetap sama namun menjadi responsive, silahkan gunakan kode CSS di bawah ini:
.videoyoutube{
text-align: center;
background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
border:1px solid #A8A8A8;
border-radius:5px;
margin:20px auto;
width:80%;
box-shadow: 1px 30px 30px -26px #818181;
}
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:8px;
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
Untuk kode padding-bottom:56.25% pada CSS .video-responsive silahkan simak penjelasannya dari sumbernya pada link di bawah postingan ini. Kemudian silahkan gunakan kode HTML di bawah ini untuk memunculkan videonya di postingan:
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/fcr2VSNf7LI"></div>
</div>
</div>
Silahkan ganti URL embed videonya dengan URL embed video yang Anda ingin tampilkan.
Kemudian simpan kode javascript iframe loader video Youtube di bawah ini DI ATAS kode </body>
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.video-youtube').each(function(){
$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script>
Dan jangan lupa blog Anda sudah dilengkapi dengan jquery library seperti di bawah ini (berapa pun versinya)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Selesai....
Sebagai LIVE DEMO-nya silahkan nikmati video Geisha - Lumpuhkan Ingatanku di bawah ini. Silahkan coba resize layar monitor Anda dengan menekan tombol CTRL + Scroll Atas / Bawah pada keyboard dan mouse Anda, atau coba test halaman ini dengan responsive tool.