Membuat Kode Embed Youtube Responsive

Maksud dari judulnya adalah, bagaimana membuat youtube hasil embed menjadi responsive.

Banyak jalan menuju Roma, dan berikut adalah salah satunya: Gunakan CSS, caranya?


Mari kita lihat dulu, kode embed default dari youtube

< iframe src="//www.youtube.com/embed/ha_9Omn9obk" height="480" width="853" allowfullscreen="" frameborder="0">

Untuk membuatnya menjadi responsive, maka kita hilangkan parameter yang tidak perlu, sehingga kode embed menjadi seperti ini

< iframe src="//www.youtube.com/embed/ha_9Omn9obk" allowfullscreen="" frameborder="0">

Setelah itu tutup kode ‘iframe’ dengan sebuah div dan beri class, menjadi seperti ini

<div class="youtube-responsive"$gt;
< iframe src="//www.youtube.com/embed/ha_9Omn9obk" allowfullscreen="" frameborder="0">
<div$gt;

Nah sekarang ke bagian CSSnya. Konsepnya adalah meletakkan sebuah objek dengan posisi ‘absolute’ didalam objek yang mempunyai posisi ‘relative’. Maka CSSnya adalah sebagai berikut

.youtube-responsive { position: relative; padding-top: 50%; height: 0; overflow: hidden; }
.youtube-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Dan selesai! sudah dicoba? apakah kode embed youtube kamu sudah menjadi responsive sekarang? atau malah tidak berhasil? coba diperhatikan lagi CSSnya, atau coba bermain-main dengan CSSnya. Saya mencoba menghilangkan style ‘padding-top’ di class ‘youtube-responsive’ dan iframenya tidak muncul. Ada yang tahu kenapa?

Terima kasih sudah membaca artikel saya, semoga berguna. Jangan lupa share supaya kita semua bisa.