Cara Membuat Iframe Responsive Aspek Rasio Lebar Tinggi Otomatis Menyesuaikan Layar

Pada artikel Dukuntekno kali ini, saya akan membuatkan sebuat tutorial cara membuat Iframe dengan aspek rasio lebar tinggi yang otomatis menyesuaikan layar. Dan tutor kali ini murni menggunakan CSS tanpa Javascript sama sekali, jadi halaman situs Anda akan tetap ringan.

Apa Manfaat Iframe Yang Responsive?
Manfaatnya tentu akan terlihat ketika situs atau halaman postingan di situs Anda yang menampilkan skrip iframe ukuran iframe-nya akan menyesuaikan tinggi lebar layar monitor termasuk layar semartphone. Selain itu juga tutor ini akan menjaga aspek rasio, Anda bisa menentukan aspek rasio seperti yang saya pakai untuk menampilkan gambar, video dan beberapa skrip uiframe saya menggunaakan aspek rasio 16:9.

Nah udah jelas ya manfaat dari skrip iframe yang responsif terhadap segala ukuran layar?. Sekarang kita ke bagian tutorial.

Cara Membuat Iframe Menjadi Responsive Menggunakan CSS
1. Buka postingan blog Anda, lalu edit postingan tersebut ke mode edit HTML.

2. Tambahkan kode CSS berikut di baris paling atas:

3. Untuk memakai kode CSS nya caranya seperti ini:

<div class="responsive-container"><iframe class="responsive-iframe" ></iframe></div>

4. Contoh berikut merupakan kode iframe yang telah saya edit iframe-nya menjadi responsive.

<div class="responsive-container"><iframe allowfullscreen="" class="responsive-iframe" frameborder="0" height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3954.6974180176376!2d110.2015626143746!3d-7.6078684773097285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a8cf009a7d697%3A0xdd34334744dc3cb!2sBorobudur+Temple!5e0!3m2!1sen!2sid!4v1545602961394" style="border: 0;" width="800"></iframe></div>

5. Berikut hasil dari kode no 4 yang telah saya padukan dengan CSS iframe responsive yang menampilkan Peta Google Maps Borobudur.


Nah mudah kan? Anda bisa menggunakan kode CSS diatas untuk kode iframe Embed Video Youtube, Google Maps dan kode iframe lainya. Selain itu kode CSS diatas juga bisa dipakai untuk membuat gambar yang responsive di blogspot.