Menggunakan video dapat dilakukan untuk menambah variasi konten dan memikat hati pengunjung. Hal ini juga dipermudah dengan adanya kode tanam (embed code) yang disediakan oleh penyedia jasa layanan video sharing seperti Youtube, Vimeo, dll. Namun jangan lupa membuat video responsif agar bisa tampak bagus di semua perangkat.
Di era di mana penggunaan internet tidak hanya digunakan melalui PC saja, kamu memerlukan tampilan yang bisa menyesuaikan diri dengan layout apapun.
Untuk itu memiliki tema yang responsif mutlak diperlukan agar kamu juga bisa memuaskan pengunjung yang mengakses situs kamu dengan smartphone atau tablet.
Daftar Isi
Cara Memeriksa Apakah Video Tampil Responsif
Beberapa tema dapat membuat video yang kamu gunakan responsif seperti tema wordpress yang saya gunakan saat ini. Dengan begitu saya tidak perlu mengutak-atik settingan video yang saya pasang.
Untuk mengecek apakah video yang kamu pasang bisa responsif atau tidak, cara yang paling mudah adalah dengan mengubah-ubah ukuran browser yang kamu gunakan secara manual.
Kalau video tetap bisa mengikuti ukuran layar brower tanpa terpotong, maka berarti kamu tidak perlu melakukan apa-apa lagi.
Kalau perlu kamu bisa menggunakan tools berikut untuk mengetahui bagaimana tampilan situs/blog kamu di perangkat lainnya.
Cara Menampilkan Video dari Youtube, Vimeo, atau DailyMotion di Blog
Pertama-tama, kamu harus tahu terlebih dahulu bagaimana cara memposting video dari layanan video-sharing seperti Youtube, Vimeo, Dailymotion. Kalau kamu sudah tahu, langsung saja ke langkah selanjutnya.
Setiap penyedia jasa layanan video sharing seperti Youtube memiliki menu agar kamu dapat berbagi video dengan mudah. Menu tersebut biasanya terletak dekat dengan video agar kamu dapat dengan mudah mengaksesnya.
a. Cara memasang video Youtube di Blog
Pada Youtube, terdapat tombol SHARE dengan ikon tanda panah. Kalau kita mengklik menu tersebut, maka akan ada pilihan untuk membagikannya ke sosmed, mempostingnya, hingga mengirim link ke video tersebut melalui email.
Untuk Menggunakan video tersebut dalam postingan kita, pilih menu EMBED. Di situ kamu akan mendapatkan kode yang diawali dengan kata iframe. Kode inilah yang nantinya akan kita gunakan untuk menampilkan video pada pos/laman.
Dibawahnya, kamu bisa melakukan beberapa pengaturan dan melihat hasilnya secara langsung melalui LIVE PREVIEW.
Kalau kamu sudah selesai, kopi kode yang ada dan salin ke dalam pos kamu. Ingat untuk mengubah tab text editor menjadi HTML pada Blogger dan TEXT pada WordPress.
Bila kamu butuh penjelasan yang lebih lengkap, simak tutorial cara posting video Youtube dari bisablog.com.
b. Cara memasang video Dailymotion dan Vimeo di blog
Untuk Dailymotion dan Vimeo, caranya hampir sama dengan di atas. Kamu hanya perlu mengklik tombol Share/Berbagi dan kopi kode tersemat (embed code) yang disediakan lalu pasang di pos yang kamu inginkan.
Pada dailymotion juga terdapat live preview agar kamu dapat melihat langsung kode tanam yang akan kamu gunakan nanti.
Kalau kamu melihat contoh pemasangan konten video pada blog, kamu bisa memeriksanya sendiri kalau semua video yang terpasang tidak ada satupun yang responsif, baik dari Youtube, Vimeo, ataupun Dailymotion.
Cara Membuat Video Responsif
Ada dua cara yang bisa kamu lakukan untuk membuat video yang kamu pasang agar menjadi responsif. Yang pertama adalah cara mudah, yang kedua adalah cara yang lebih sulit. hahaha!
Bagaimana kalau kita mulai dengan cara yang lebih mudah terlebih dahulu.
1. Buat video responsif dengan EmbedResponsively
Cara yang ini sangat mudah dilakukan sampai-sampai saya khawatir mungkin kamu tidak akan sempat membaca langkah lainnya yang lebih sulit. Namun cara yang ada pada langkah ini mengikuti prinsip yang ada pada langkah yang sulit nanti. Jadi kalau kamu penasaran bagaimana caranya, baca terus sampai selesai ya!
Pada cara yang satu ini, kamu cukup masuk ke situs EmbedResponsively.com dan salin link video yang ingin kamu ubah menjadi responsif.
Ingat, kamu hanya perlu link ke videonya saja, tidak perlu menggunakan cara di atas.
Misalnya saja kamu ingin memposting video lagu keren ini, kamu cukup masukan link https://www.youtube.com/watch?v=dQw4w9WgXcQ ke dalam tab Youtube dan EmbedResponsively akan membuatkan kamu kodenya. Selanjutnya kamu hanya perlu mengkopi kode tersebut ke dalam pos kamu.
Ini adalah contoh video responsif dari contoh yang saya berikan sebelumnya.
Ada kalanya video tidak bisa muncul meskipun kamu sudah memasukan kode dari EmbedResponsively. Untuk mengatasi itu, cukup tambahkan kata type="text/css" sehingga kode yang kamu dapat diawali dengan <style type="text/css">
2. Buat video responsif dengan cara manual
Sekarang saatnya menggunakan cara yang sulit. Well, sebenarnya tidak terlalu sulit, hanya saja karena berhubungan dengan koding dan dibandingkan dengan cara sebelumnya, maka cara ini jadi terlihat sulit.
Yang menjadi masalah ketika memasang video dan membuatnya responsif adalah bagaimana cara mempertahankan rasio video ketika layar browser berubah ukurannya.
Tidak seperti file gambar, video yang dibungkus elemen iframe tidak memiliki dimensi yang bisa digunakan browser untuk menghitung rasio obyek tersebut.
Namun setiap permasalahan pasti ada solusinya. Thierry Koblentz dalam artikelnya menggunakan Instrinsic Ratio untuk mengatasi masalah ini.
Ide yang digunakannya adalah dengan menciptakan sebuah wadah yang memiliki rasio tertentu (4:3, 16:9, dll) dan memasukan elemen seperti video ke dalamnya. Dengan begitu, rasio elemen tersebut bisa terjaga meskipun layout browser berubah-ubah.
Sekarang kita ambil contoh video dari Youtube yang saya gunakan sebelumnya. Kita sudah mendapatkan kode untuk memasang video tersebut pada blog kita,
<iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/WjqiU5FgsYc" width="560"></iframe>Yang perlu kita lakukan adalah ‘membungkusnya’ dan memberikannya class khusus agar kita dapat mengatur tampilannya. Dengan memberinya class videwrap dan meletakannya pada tag <div>, maka kode di atas akan menjadi:
<div class="videowrap"> <iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/WjqiU5FgsYc" width="560"></iframe> </div>Sekarang saatnya memasukan kode CSS pada template Blogger. Bila kamu mamakai WordPress, kamu bisa menambah kode berikut ke dalam file style.css.
.videowrap {
position: relative;
padding-bottom: 56.25%;/*rasio 16:9, untuk rasio 4:3 ganti dengan 75%*/
padding-top: 30px;
overflow: hidden;
max-width: 100%;
height: auto;
margin: 20px auto;
}
.videowrap iframe, .videowrap object, .videowrap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Kalau kamu perhatikan dengan seksama, kode ini mirip dengan yang ada di cara pertama bukan? Ini karena kedua cara ini memiliki prinsip yang sama.
Penutup
Selesai sudah tutorial kita kali ini. Mudah-mudahan artikel ini bisa membantu kamu membuat video responsif, apapun cara yang kamu pilih.
Bila kamu tidak mau repot, ada baiknya kamu memiih dan memakai tema yang responsif. Meski umumnya tema saat ini sudah memiliki fitur tersebut, ada baiknya kamu memeriksanya sekarang juga. Lumayan kan jadi tidak perlu repot-repot membuat video responsif lagi.
keren ka, jadi pengen bikin video responsif juga nih