Cara Membuat: Iframe Respon

Belajar cara menggunakan CSS untuk membuat iframe yang berespon.

Iframe Respon

Buat iframe yang mempertahankan rasio lebar tinggi (4:3, 16:9, dll):

Apa itu Rasio Lebar Tinggi?

Rasio lebar tinggi elemen menggambarkan hubungan proporsi lebar dan tinggi. Dua rasio lebar tinggi video yang umum adalah 4:3 (format video umum abad ke-20) dan 16:9 (format TV HD dan TV digital Eropa serta format video YouTube umum).

How To - Iframe Respon

Tahap pertama - Tambahkan HTML:

Gunakan elemen kontainer, seperti <div>, dan tambahkan iframe di dalamnya:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Tahap kedua - Tambahkan CSS:

untuk padding-top Tambah nilai persen untuk mempertahankan rasio lebar tinggi kontainer DIV. Contoh di bawah ini akan membuat kontainer dengan rasio lebar tinggi 16:9, yang adalah rasio lebar tinggi standar video YouTube.

Contoh - Rasio Lebar Tinggi 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* Rasio Lebar Tinggi 16:9 (9 dibagi 16 sama dengan 0.5625) */
}
/* Lalu atur gaya iframe, sehingga dapat menyesuaikan tinggi dan lebar penuh dalam kontainer div */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Coba sendiri

Lainnya Rasio Lebar Tinggi

Contoh - Rasio Lebar Tinggi 4:3

.container {
  padding-top: 75%; /* Rasio Lebar Tinggi 4:3 */
}

Coba sendiri

Contoh - Rasio Lebar Tinggi 3:2

.container {
  padding-top: 66.66%; /* Rasio Lebar Tinggi 3:2 */
}

Coba sendiri

Contoh - Rasio Lebar Tinggi 8:5

.container {
  padding-top: 62.5%; /* Rasio Lebar Tinggi 8:5 */
}

Coba sendiri

Contoh - 1:1 Rasio Lebar Tinggi (Lebar dan Tinggi selalu sama)

.container {
  padding-top: 100%; /* 1:1 rasio lebar tinggi */
}

Coba sendiri