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
[php]< iframe src=”//www.youtube.com/embed/ha_9Omn9obk” height=”480″ width=”853″ allowfullscreen=”” frameborder=”0″>[/php]
Untuk membuatnya menjadi responsive, maka kita hilangkan parameter yang tidak perlu, sehingga kode embed menjadi seperti ini
[php]< iframe src=”//www.youtube.com/embed/ha_9Omn9obk” allowfullscreen=”” frameborder=”0″>[/php]
Setelah itu tutup kode ‘iframe’ dengan sebuah div dan beri class, menjadi seperti ini
[php]
<div class=”youtube-responsive”$gt;
< iframe src=”//www.youtube.com/embed/ha_9Omn9obk” allowfullscreen=”” frameborder=”0″>
<div$gt;
[/php]
Nah sekarang ke bagian CSSnya. Konsepnya adalah meletakkan sebuah objek dengan posisi ‘absolute’ didalam objek yang mempunyai posisi ‘relative’. Maka CSSnya adalah sebagai berikut
[php]
.youtube-responsive { position: relative; padding-top: 50%; height: 0; overflow: hidden; }
.youtube-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
[/php]
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.