Satu hal yang lumayan mengganggu saat mengunjungi web yang – seharusnya – responsive adalah iFrame yang tidak ikut responsive. YouTube embed, Twitter embed, Instagram embed, dan web element lain yang menggunakan iFrame sebagai dasar tampilannya sering nyelonong melewati lebar layar. Akhirnya, layout responsive yang dibuat jadi tidak efektif.
Beberapa waktu lalu saya sempat menghadapi masalah yang sama dengan YouTube embed ketika mengembangkan website untuk teman. Solusinya saya temukan di Avex Designs.
Responsive YouTube Embed
Yang dibutuhkan sebenarnya sangat sederhana: sebuah DIV container yang ‘memaksa’ iFrame berisi video YouTube tampil sempurna saat parameter width diset 100%. John Surdakowski dari Avex Designs menambahkan padding-bottom 56.25% agar video tetap muncul sempurna.
Kode CSS yang harus disiapkan:
[syntax type=”css”]
.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%;
}[/syntax]
Kemudian kode embed asli dari YouTube perlu dimodifikasi sedikit menjadi:
[syntax type=”html”]
<div class=”video-container”>
<iframe src=”http://www.youtube.com/embed/FtY7xxc7dHI” frameborder=”0″ width=”560″ height=”315″></iframe>
</div>
[/syntax]
Hasilnya, video YouTube yang ditampilkan bebas mengikuti lebar layout saat web dilihat dari device dengan layar kecil.
Kenapa?
Lalu kenapa padding-bottom harus diset ke 56.25%? Hal ini karena rasio video yang lazim digunakan, 16:9. Untuk mempertahankan rasio tersebut saat width diset ke 100%. Sederhananya, 100:56.25 = 16:9.
