Responsive merupakan salah satu teknik yang membuat website Anda menjadi lebih nyaman jika dilihat pada berbagai layar display, dari layar dekstop ke layar gadget mobile. Mengapa harus responsive? Dalam post kami sebelumnya telah dijelaskan, memiliki website versi mobile saat ini merupakan keharusan.
Dalam wikipedia dijelaskan bahwa rancangan website yang responsive merupakan upaya untuk memberikan pengalaman berselancar yang nyaman disertai kemudahan membaca dan navigasi, dengan meminimalkan penggunaan resize, panning, dan scroll. Hasil akhir merupakan rancangan halaman web yang merespon secara otomatis environment.
Bagi website yang banyak menyediakan content website berbasis video dari Youtube, Anda mungkin tahu bahwa kode embed yang diberikan oleh Youtube sifatnya fixed width (lebar sudah ditentukan). Jika Anda sudah merancang design website yang responsive, keberadaan video Youtube yang masih fixed ini tentunya sedikit mengganggu.
Berikut ini contoh video embed Youtube yang sudah responsive. Silakan diuji dengan mengurangi lebar layar browser Anda.
Adapun langkah-langkahnya adalah sebagai berikut:
Tambahkan rule CSS berikut dalam stylesheet website Anda.
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Setelah itu, kode embed video Youtube harus di dalam kontainer video-container. Berikut ini contohnya:
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/D6z6hn6wZlg" frameborder="0" allowfullscreen></iframe>
</div>
Bacaan lebih lanjut:
http://avexdesigns.com/responsive-youtube-embed/
