Cara - Iframe Responsif
Pelajari cara membuat iframe responsif dengan CSS.
Iframe Responsif
Buat iframe yang akan mempertahankan rasio aspek (4:3, 16:9, dll.) saat diubah ukurannya:
Apa itu rasio aspek?
Rasio aspek suatu elemen menggambarkan hubungan proporsional antara lebar dan tingginya. Dua rasio aspek video yang umum adalah 4:3 (format video universal abad ke-20), dan 16:9 (universal untuk televisi HD dan televisi digital Eropa, dan untuk video YouTube).
Cara - Iframe Responsif
Langkah 1) Tambahkan HTML:
Gunakan elemen wadah, seperti <div>, dan tambahkan iframe di dalamnya:
Contoh
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
Langkah 2) Tambahkan CSS:
Tambahkan nilai persentase untuk padding-top
mempertahankan rasio aspek wadah DIV. Contoh berikut akan membuat rasio aspek 16:9, yang merupakan rasio aspek default video YouTube.
Contoh Rasio Aspek 16:9
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container
div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Rasio aspek lainnya:
Contoh 4:3 Rasio Aspek
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
Contoh 3:2 Rasio Aspek
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
Contoh 8:5 Rasio Aspek
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
Contoh Rasio Aspek 1:1 (Tinggi dan Lebar Selalu Sama)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}