Cara Membuat Video Responsive Menggunakan Viewport

22/12/2014    Faizal Rafik    4747    Website

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat sebuah video menjadi Responsive menggunakan Viewport. Viewport adalah sebuah perintah yang berfungsi untuk membuat sebuah tampilan website responsive. Disini saya akan menggunakan viewport pada sebuah video agar video tersebut menjadi responsive atau bisa dibuka diukuran layar apapun. Dan disini saya juga akan menggunakan perhitungan Rasio Intrinsik untuk melakukan sebuah pendekatan untuk memperluas lebar video pada halaman website. Rasio Intrinsik biasanya digunakan pada video karena lebar dan tinggi iframe tidak secara otomatis membesar untuk website yang memiliki ukuran lebar full width. Baiklah kita langsung saja praktekkan ya teman-teman.

Pertama kalian bisa ambil sebuah video yang ada di youtube, dan copykan kode video tersebut pada halaman HTML kalian seperti gambar dibawah ini.

Kemudian berikut adalah untuk CSS nya.

Pada CSS diatas kalian bisa lihat saya mengatur lebar iframe 100% dan tingginya saya menggunakan rumus berikut (100 * ratio)vw. Biasanya video Youtube memiliki rasio 16:9 (jika dinyatakan sebagai 16/9), maka agar video youtube tersebut responsive maka kode CSS nya seperti gambar diatas.

Berikut adalah hasil keseluruhannya.

See the Pen jEromJ by Dumet_School (@dumet_school) on CodePen.

No data.