Oleh / CSS

Cara Membuat Responsive Video Youtube & Selfhosted

Membuat responsive video iframe atau Embed Youtube di blog sangatlah mudah dilakukan hanya dengan menggunakan trik CSS. Dari youtube sendiri, video mereka tidak otomatis responsive pada lebar berbagai macam device. Trik video responsive ini juga bisa dilakukan pada video-video selain youtube, misalnya video dari Vimeo, Vidio, Selfhosted Video (video yang disimpan di server blog menggunakan player tertentu) dan atau juga bisa diterapkan pada audio yang mempunyai player; misalnya audio dari Soundcloud. Jika masih kurang, Google Maps juga bisa diterapkan dalam teknik trik ini.

Intinya pada penggunaan trik ini terdapat 2 poin:

  1. Membungkus elemen video: <iframe>, <object>, <video> dan <embed> dengan elemen <div>. Saya gunakan div dikarenakan elemen tersebut sudah biasa di pakai dalam HTML.
  2. Gunakan CSS untuk mengatur kedua elemen tersebut di atas, yakni <div> sebagai pembungkus dan <iframe> sebagai yang terbungkus.

Sehingga struktur HTMLnya menjadi seperti contoh di bawah ini:

OK, sekarang langsung mulai saja. Sebelumnya silahkan ambil dan siapkan HTML iframe dari youtube terlebih dahulu. Lalu tempatkan div dan iframe sehingga terstruktur seperti struktur HMTL di atas.

Selanjutnya, tambahkan style CSS untuk mengatur tampilan pada setiap elemen-eleman HTML di atas, agar sesuai dengan lebar device tertentu. Berikut adalah code CSSnya:

Penggunaan iframe diatas setelah class selector .video_wrapper digunakan karena embed youtube menggunakan <iframe>, jika embed selain youtube menggunakan selaian <iframe> maka ganti dengan sesuai dengan elemen HTML yang dipakai. Misalnya elemen HTML yang digunakan adalah <object> dan bukan <iframe>, maka penulisan dalam CSS adalah .video_wrapper object.

Penjelasan padding-bottom: 56.25% adalah menggunakan resolusi aspect ration 16:9, dimana lebar video lebih besar dari pada tinggi video atau pada gambar bisa disamakan dengan gambar landscape persamaannya.

Bagaimana Cara Menerapkan Responsive iframe/embed Youtube pada WordPress?

Pada umumnya, theme WordPress akhir-akhir ini sebagian besar sudah mengaplikasikan video responsive pada tiap halaman-halaman post dan page. Namun jika theme yang anda pakai belum menggunakannya, maka langkah-langkah di bawah ini bisa membantu anda.

  1. Pada post editor dalam wordpress, pilih text ya.. bukan visual. Lalu paste struktur HTML seperti di atas.
  2. Paste code CSS di atas pada style.css pada theme yang anda pakai.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *