--> Skip to main content

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?

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar

Coba aplikasi TipsdanTrik.web.id

Tambahkan aplikasi TipsdanTrik di smartphone tanpa install, buka TipsdanTrik dengan browser Chrome di smartphone. Kemudian klik ikon 3 titikdi browser dan pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi TipsdanTrik dari layar utama smartphone Anda.