Cara Membuat Iframe Responsive CSS

Cara Membuat Iframe Responsive dengan CSS auto width dan auto height

Pada kesempatan ini Saya memberikan pembelajaran tentang mengatur iframe yang sudah di sesuaikan dengan lebar (width) dan panjang (height) sesuai dimensi dari layar Anda. Terlebih height/ panjang layar yang terkadang tidak bisa fit atau responsife.

Sebenarnya kita hanya butuh tambahan CSS saja untuk mengatur nya. Sebelum beranjak ke langkah penerapannya marilah kita pahami tentang pengertian iframe dan apa kegunaan iframe itu sendiri.

Apa itu iframe ?

iFrame adalah singkatan dari Inline Frame, sebuah komponen dari file HTML untuk menyematkan video, dokumen, dan file lainnya ke dalam sebuah halaman website.

Struktur Iframe

<iframe src="...." frameborder="0" allowfullscreen></iframe>

Nah banyak pertanyaan muncul, saat di implementasikan biasanya height harus di buat secara manual menyesuaikan dimensi display layar. Untuk kali ini kita tidak perlu repot lagi, tambahkan saja css supaya tampilan iFrame dapat responsive.

Maka tambahkan CSS menjadi seperti ini

<style>
    iframe {
        display:block;
        width:100%;
        height:91vh;
    }
</style>

Height menggunakan tambahan vh, Anda bisa sesuaikan sesuai yang Anda butuhkan. Disini Saya menggunakan 91vh untuk height.

Satuan vw dan vh

Satuan ini disebut viewport, satuan ini adalah cara terbaik untuk membuat elemen responsif.

Hampir sama dengan % atau persentase, namun persen tidak bisa menentukan height.

vw artinya viewport width

vh artinya viewport height

Satuan ini bergantung pada induk elemennya, jika induk elemen mempunyai ukuran 300px x 400px maka 1vh darinya adalah 400 * 1/100 = 4px dan jika 100vh artinya adalah height yang kita tentukan 100% dari height induknya.

Jika induk dari element adalah 100% atau tak terhingga, maka 100vh bergantung pada ukuran layar.

Nah mudah bukan. Silahkan di implementasikan ya .

Baca juga : Cara Membuat Menu Link Iframe

Demikian ulasan mengenai Bagaimana Cara Membuat Iframe Responsive dengan CSS auto width dan auto height. Width 100% dan Height Auto dengan mudah dan sederhana. Tetap semangat untuk menulis, dan berikan ilmu kepada Siapa saja ya. Sekian dari Saya semoga bermanfaat.