Di bawah kita akan mempelajari cara membuat iframe responsif dengan CSS.
Iframe Responsif
Iframe merupakan sebuah singkatan dari Inline Frame yang dapat digunakan untuk dapat menyematkan satu atau beberapa video, dokumen, foto dan file ke dalam sebuah halaman website. Proses yang dilakukan sebelum menyematkan berbagai file di atas disebut dengan teknik embed Iframe. Iframe ini juga menggunakan aspek rasio agar tampilannya terlihat baik dan dapat menyesuaikan dengan segala jenis ukuran web browser atau lebih familiar dengan responsif.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <h2>Responsive Iframe</h2> <h3> Pertahankan Rasio Aspek 16: 9 </h3> <p> Ubah ukuran jendela untuk melihat efeknya. </p> <div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/7Qp5vcuMIlk"></iframe> </div> </body> </html>
Membuat Iframe Responsif
Langkah 1) Tambahkan HTML:
Gunakan elemen kontainer, seperti, dan tambahkan iframe di dalamnya:
Contoh
<div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/7Qp5vcuMIlk"></iframe> </div>
Langkah 2) Tambahkan CSS:
Tambahkan nilai persentase padding-top untuk menjaga rasio aspek dari container 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 Rasio Aspek (bagi 9 dengan 16 = 0,5625) */
}
/* Kemudian beri style pada iframe agar sesuai dengan container div dengan tinggi dan lebar penuh */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}Rasio aspek lainnya:
Contoh Rasio Aspek 4: 3
.container {
padding-top: 75%; /* 4:3 Aspect Ratio */
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 75%; /* 4:3 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>Responsive Iframe</h2>
<h3> Pertahankan Rasio Aspek 4: 3 </h3>
<p> Ubah ukuran jendela untuk melihat efeknya. </p>
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/hk2d8CG4kdQ"></iframe>
</div>
</body>
</html>
Contoh Rasio Aspek 3: 2
.container {
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 66.66%; /* 3:2 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>Responsive Iframe</h2>
<h3> Pertahankan Rasio Aspek 3: 2 </h3>
<p> Ubah ukuran jendela untuk melihat efeknya. </p>
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/jLBmd0-9nZU"></iframe>
</div>
</body>
</html>
Contoh Rasio Aspek 8: 5
.container {
padding-top: 62.5%; /* 8:5 Aspect Ratio */
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 62.5%; /* 8:5 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>Responsive Iframe</h2>
<h3> Pertahankan Rasio Aspek 8:5 </h3>
<p> Ubah ukuran jendela untuk melihat efeknya. </p>
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/v0EQnYIuE0U"></iframe>
</div>
</body>
</html>
Contoh Rasio Aspek 1: 1 (Tinggi dan Lebar Selalu Sama)
.container {
padding-top: 100%; /* 1:1 Aspect Ratio */
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 100%; /* 1:1 Aspect Ratio */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>Responsive Iframe</h2>
<h3> Pertahankan Rasio Aspek 1: 1 </h3>
<p> Ubah ukuran jendela untuk melihat efeknya. </p>
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/nolbCVKXQcw"></iframe>
</div>
</body>
</html>
