Cara Membuat Responsive Iframe

Cara Membuat Responsive Iframe - Hallo semuanya, setelah sebelumnya kita membuat manipulasi iframe, pada kesempatan kali ini kita akan membuat respinsive iframe, seperti yang kalian tahu iframe adalah sebuah tag html yang memungkinkan kita untuk menampilkan file eksternal baik itu video ataupun halaman lain tanpa harus berpindah halaman, tahukah kalian bahwa sebagai tag html, tentu iframe memiliki karakteristik tertentu. untuk lebih lengkapnya kita simak penjelasan berikut.

Responsive Iframe

Pada umumnya kode standard untuk iframe adalah seperti berikut

<iframe
  width="560"
  height="315"
  src="https://www.dumetschool.com"></iframe>

Pada kode di atas jika kita gunakan tidak akan responsif dikarenakan pada tag iframe standard terdapat atribut width dimana yang kita tahu jika dalam prinsip responsif, kita tidak diperbolehkan menggunakan width secara statis (tidak bisa berubah dan menyesuaikan), oleh karena itu, disini kita akan membuat sebuah iframe yang bersifat dinamis dan menyesuaikan width dari media yang kita gunakan. Berikut kode Iframe yang kita butuhkan

<div style="--aspect-ratio: 16/9;">
  <iframe
    src="https://www.dumetschool.com"
    width="1600"
    height="900"
    frameborder="0"
  >
  </iframe>
</div>

Lalu kita buat kode CSS untuuk membuat iframe menjadi responsif

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
}
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}

Pada CSS di atas kita menggunakan attribute selector kepada aspect-ratio untuk membuat iframe tersebut menjadi responsif, sebagai tambahan, tahukah kalian tentang aspect-ratio pada CSS? aspect-ratio disini dapat kita gunakan untuk menentukan skala perbandingan tinggi dan lebar sebuah elemen. Baiklah itu saja pembahasan kali ini, demikian artikel tentang cara membuat responsive iframe. semoga bermanfaat