Cara Menciptakan Iframe Responsive Aspek Rasio Lebar Tinggi Otomatis Menyesuaikan Layar
Pada artikel Dukuntekno kali ini, aku akan berbagi 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 isyarat CSS berikut di baris paling atas:
3. Untuk menggunakan isyarat CSS nya caranya menyerupai ini:
<div class="responsive-container"><iframe class="responsive-iframe" ></iframe></div>
4. Contoh berikut merupakan isyarat 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 isyarat no 4 yang telah aku padukan dengan CSS iframe responsive yang menampilkan Peta Google Maps Borobudur.
Nah gampang kan? Anda dapat menggunakan isyarat CSS diatas untuk isyarat iframe Embed Video Youtube, Google Maps dan isyarat iframe lainya. Selain itu isyarat CSS diatas juga dapat digunakan untuk menciptakan gambar yang responsive di blogspot.
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 isyarat CSS berikut di baris paling atas:
3. Untuk menggunakan isyarat CSS nya caranya menyerupai ini:
<div class="responsive-container"><iframe class="responsive-iframe" ></iframe></div>
4. Contoh berikut merupakan isyarat 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 isyarat no 4 yang telah aku padukan dengan CSS iframe responsive yang menampilkan Peta Google Maps Borobudur.
Nah gampang kan? Anda dapat menggunakan isyarat CSS diatas untuk isyarat iframe Embed Video Youtube, Google Maps dan isyarat iframe lainya. Selain itu isyarat CSS diatas juga dapat digunakan untuk menciptakan gambar yang responsive di blogspot.