Membuat ukuran video embed youtube dan vimeo tetap responsive

Video responsive menyesuaikan ukuran pada setiap tampilan dibeda ukuran tanpa harus menggunakan media queri css. Apakah Pernah mencoba untuk membuat video YouTube responsif? Jika demikian, itu bisa agak rumit. Ketika saya menambahkan kode embed, video memiliki tinggi tetap dan lebar. Ini tampak baik di komputer desktop, tapi cukup banyak pecah desain saat melihat pada perangkat mobile. Saya ingin tahu bagaimana membuat mobile video youtube dan vimeo. Oleh karena itu, kita membutuhkan kode embed YouTube responsif. Satu akan berpikir bahwa video yang dengan 100% lebar akan secara otomatis mengubah ukuran ke wadah sekitarnya. Nah, yang ini tidak terjadi. Anehnya, Youtube tidak secara otomatis memiliki kode embed responsif.

Cara mengatasinya sebenarnya cukup sederhana. Berikut adalah cara untuk membuat mobile video youtube:

Anda akan perlu untuk membungkus responsif kode youtube embed dengan <div> dan menentukan 50% sampai 60% bawah padding. Kemudian tentukan elemen anak (iframe, objek embed) lebar 100%, 100% tinggi, dengan posisi absolut.

Berikut adalah caranya :

CSS :

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

HTML :

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/4uExQKEHSEc" frameborder="0" allowfullscreen></iframe></div>

Sekarang video sudah responsive, tinggal kita test kedalam perangkat desktop, tablet, dan mobile.