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.