Cara Membuat Iframe YouTube Responsive dengan CSS

Teknik Membuat Iframe YouTube Responsif

Untuk membuat video YouTube tertanam (embed) menjadi responsif, Anda tidak bisa hanya mengandalkan atribut width dan height statis dari kode bawaan YouTube. Anda memerlukan pembungkus (wrapper) dengan rasio aspek yang dikunci menggunakan CSS agar video menyesuaikan lebar layar secara otomatis tanpa merusak tata letak halaman.

Implementasi Kode CSS dan HTML

Gunakan struktur berikut untuk memastikan video tetap berada dalam rasio 16:9 di semua ukuran layar:

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Rasio 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/ID_VIDEO_ANDA" frameborder="0" allowfullscreen></iframe>
</div>

Tabel Komparasi Metode Embed

Langkah-langkah Teknis

1. Salin kode iframe dari tombol 'Bagikan' > 'Sematkan' di YouTube.
2. Bungkus kode tersebut dengan elemen div yang memiliki class video-container.
3. Tambahkan CSS di atas ke dalam file stylesheet situs Anda atau di dalam tag <style> pada halaman terkait.
4. Pastikan nilai padding-bottom diatur ke 56.25% untuk rasio standar 16:9. Jika video memiliki rasio berbeda, sesuaikan persentase tersebut (contoh: 4:3 adalah 75%).

Troubleshooting Umum

Jika video tidak muncul atau terpotong, periksa apakah elemen pembungkus memiliki position: relative. Pastikan juga tidak ada CSS global lain yang memaksa lebar iframe menjadi nilai piksel tetap (fixed width). Jika Anda menggunakan WordPress, banyak tema modern sudah menyertakan class bawaan seperti .wp-block-embed-youtube yang bisa Anda manfaatkan langsung tanpa CSS tambahan.