Cara Simpel Membuat Iframe Responsive di Blogger
Inline Frame atau lebih dikenal dengan iframe adalah komponen html yang digunakan untuk menyematkan video, dokumen dan file lainnya ke dalam halaman blog. Pada artikel ini saya akan menuliskan cara simpel bagaimana cara membuat iframe yang responsive dengan beberapa baris css saja.
Saya menemukan cara ini ketika membuat form untuk parse kode postingan. Sebelumnya saya juga sudah membuat trik untuk embed video youtube super ringan. Kamu bisa menggunakan cara ini juga untuk melakukan embed video maupun embed dokumen.
Kode embed iframe biasanya ditulis seperti ini:
<iframe allowfullscreen="" frameborder="0" height="315" src="url yang akan di embed" width="560"></iframe>Jika kita mempaste kode di atas secara langsung maka iframe akan memiliki lebar dan tinggi tetap yaitu 560 dan 315.
Lantas bagaimana caranya supaya iframe tersebut bisa responsive?
Cara yaitu kita perlu menambahkan class dalam iframenya dan kemudian mendifinisikan ulang lebar dan tinggi iframe. Kamu bisa menggunakan kode css ini:
.iframepost {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}
.iframepost iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}Kemudian gunakan kode berikut untuk menampilkan iframenya di postingan blog:
<div class="iframepost">
<iframe allowfullscreen="" frameborder="0" height="315" src="url yang akan di embed" width="560"></iframe>
</div>Selesai, sekarang coba lihat iframe yang kamu pasang. Apakah sudah tampil responsive?