Pada artikel Dukuntekno kali ini, aku akan menyebarkan 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 saat 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 dapat memilih aspek rasio menyerupai yang aku pakai untuk menampilkan gambar, video dan beberapa skrip uiframe aku menggunaakan aspek rasio 16:9.
Nah udah terang ya manfaat dari skrip iframe yang responsif terhadap segala ukuran layar?. Sekarang kita ke bab tutorial.
Cara Membuat Iframe Menjadi Responsive Menggunakan CSS
1. Buka postingan blog Anda, kemudian edit postingan tersebut ke mode edit HTML.
2. Tambahkan aba-aba CSS berikut di baris paling atas:
3. Untuk menggunakan aba-aba CSS nya caranya menyerupai ini:
4. Contoh berikut merupakan aba-aba iframe yang telah aku 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 aba-aba no 4 yang telah aku padukan dengan CSS iframe responsive yang menampilkan Peta Google Maps Borobudur.
Nah gampang kan? Anda dapat menggunakan aba-aba CSS diatas untuk aba-aba iframe Embed Video Youtube, Google Maps dan aba-aba iframe lainya. Selain itu aba-aba CSS diatas juga dapat digunakan untuk menciptakan gambar yang responsive di blogspot.
