Membuat Video Youtube Menjadi Responsif Menggunakan CSS

Secara default, saat kita menyelipkan video youtube di postingan blog, ia akan menggunakan iframe. Entah itu disematkan (embed), atau menggunakan URL link video. Jadi, tidak seperti gambar (image), video Youtube dengan iframe, tidak langsung bisa menyesuaikan diri dengan device.

Untuk tampilan desktop, tidak ada masalah yang muncul. Video akan tampil baik. Tapi, saat dibuka menggunakan ponsel, atau device lain yang lebih kecil, maka video Youtube menjadi terpotong sebagian atau jika bisa terlihat semua, maka tampilannya akan menjadi wagu. Karena tinggi video tidak proporsional dengan lebar-nya. Ini terjadi juga di blog ini.

Lalu, bagaimana mengatasinya ?

Mudah. Kita harus membuat tampilan video Youtube ini menjadi responsive, bisa menyesuaikan diri dengan lebar device yang digunakan. Caranya?

Menggunakan Jquery

Ya, kita bisa menggunakan script Jquery untuk menampilkan video Youtube menjadi responsif. Selengkapnya tentang ini, bisa Anda baca di sini. Saya tidak akan menuliskan ulang. Mbak Igniel sudah menjelaskan dengan komplit.

Membuat Video Youtube Menjadi Responsif Menggunakan CSS

Yang kedua menggunakan CSS. Saya menggunakan ini. Kenapa? Karena saya pernah menggunakan script di atas, tapi tidak berhasil. Saya tidak tahu mengapa. Mungkin karena theme yang saya pakai ini tidak mendeklarasikan kode script itu. Karena saya pernah mencoba dengan theme lain, bisa.

Setelah berputar-putar mencari, akhirnya saya menemukan blog ini, dan menerapkan cara ini di blog saya dan berhasil. Video Youtube saya menjadi responsive.

Kalau Anda ingin membuatnya juga, berikut baris kode CSS iframe untuk video Youtube,

iframe {aspect-ratio: 16 / 9;height: 100%;width: 100%;}

Ya. Hanya itu.

Bagaimana cara menambahkannya di blog?

• Copy kode CSS di atas
• Buka Tampilan >> Sesuaikan >> CSS Tambahan
• Paste di sana.
• Simpan

Silahkan cek. Seharusnya video Youtube sudah tampil responsif. Kalau Anda tidak sempat membuka ponsel, Anda bisa melihat responsifnya dengan menggunakan fitur Inspect Element dari Chrome.