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.

Membuat Tabs Vertical & Horizontal hanya dengan CSS tanpa jQuery

Fitur tabs baik vertical maupun horizontal sangat berguna khususnya bagi anda yang mempunyai konten yang sangat padat. Dengan adanya tabs dalam suatu konten akan membantu merapikannya. Dalam artian, anda hanya menampilkan konten tertentu pada satu tab sebagai tampilan utama, sedangkan yang lainnya disembunyikan untuk meminimalisir space/ruang konten yang bisa berpengaruh pada tampilan layout yang bersih dan rapi.

Bagaimana cara membuat Responsive Tabs hanya menggunakan CSS?

Kali ini saya akan membantu untuk membuat tabs hanya menggunakan CSS dan tidak memerlukan bantuan Jquery untuk menerapkannya. Tabs tersebut menggunakan <input> + <label> dengan bantuan styling CSS yang tidak akan memberatkan server tentunya.

Demo

Download

Struktur HTML dan Style di bawah adalah salah satu contoh dari 8 Tabs yang murni hanya menggunakan CSS tanpa bantuan jQuery, yakni;

  • 4 Horizontal Tabs
  • 4 Vertical Tabs

Struktur HTML

Pertama kita harus membuat struktur HTMLnya untuk menentukan kerangka Tabsnya.

Pada judul masing-masing Tabs di atas, saya menggunakan nama kota, perlu diingat bahwa judul harus berada dalam <label>. Perlu diingat bahwa masing-masing value id pada <input> harus unik dan harus sama dengan value for pada <label> di bawahnya.

Adapun pada bagian konten, tidak lupa juga bahwa masing-masing id juga harus unik.

Styling CSS

Ok sekarang kita langsung permak struktur yang telah kita buat dengan CSS untuk mendesain bagian-bagian Tabs di atas.

Pada file download yang akan anda terima, setiap file HTML dari masing-masing desain saya bedakan, harap untuk menyimak secara menyeluruh. Anda tinggal mengaplikasikannya salah satu file HTMLnya untuk melihat hasilnya.

Pada file style.css, style masing-masing desain saya masukkan jadi satu dalam style.css, namun setiap style desainnya saya bedakan agar memudahkan anda untuk menemukan style masing-masing desain.