Tidak bisa dipungkiri semakin banyak pengguna smartphone yang lebih nyaman browsing menggunakan gadgetnya ketimbang Desktop PC. Pembeli adalaah raja sepertinya berlaku juga di ranah online, dimana visitor adalah raja, bila tampilan website kita tidak nyaman maka visitor akan mencari web lain, sadisnya, kita sebagai pemilik web di judge dalam beberapa detik saja.
Jika web memiliki iframe, maka usahakan iframe tersebut responsive, kita bisa membuat iframe menjadi responsive dengan trik CSS berikut:
Pada contoh kali ini kita akan menggunakan kode embed youtube:
<iframe src="https://www.youtube.com/embed/bDoq6RDFJRg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Kita perlu menghilangkan atribut width dan height karena untuk menjadikan iframe ini responsive kita akan mengaturnya sendiri. Langkah berikutnya adalah membungkus iframe dengan div dan tambahakan CSS class seperti berikut:
<div class="responsive-container"><iframe class="responsive-iframe" ></iframe></div>
.responsive-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
That’s it! silahkan dicoba hasil iframe responsive yang sudah dibuat dengan trik CSS barusan. Jika kamu kebetulan menggunakan Bootstrap, ada class css yang sudah disediakan, yaitu: .embed-responsive dan .embed-responsive-item (untuk iframe-nya).
Tambahkan .embed-responsive-16by9 atau .embed-responsive-4by3 dibelakang .embed-responsive untuk mendefinisikan rasio iframe responsive yang diinginkan.
Teman-teman punya trik CSS sendiri atau informasi mengenai cara CSS framework lain membuat iframe responsive? Silahkan komentar dibawah yaa.