Cara Membuat Video Youtube, Vimeo, dan Dailymotion Responsif

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 membuatnya tampil responsif agar video 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 menggunakan smartphone atau tablet.

Cek apakah video responsif

Beberapa tema dapat membuat video yang kamu gunakan responsif seperti tema wordpress yang saya gunakan saat ini yang membuat 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 dengan mouse.

Kalau video tetap bisa mengikuti ukuran layar brower tanpa terpotong, maka berarti kamu tidak perlu malakukan apa-apa lagi.

Kalau perlu kamu bisa menggunakan tools berikut untuk mengetahui bagaimana tampilan situs/blog kamu di perangkat lainnya.

Bagaimana cara memposting video dari Youtube, Vimeo, dan DailyMotion

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.

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.

fitur-berbagi-share-youtube-embed-iframe-pos-blog

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.

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 dipos yang kamu inginkan.

fitur-berbagi-video-dailymotion-share-embed-blog-pos

Memasang konten video Dailymotion pada blog

Pada dailymotion juga terdapat live preview agar kamu dapat melihat langsung kode tanam yang akan kamu gunakan nanti.

fitur-berbagi-konten-video-vimeo-embed-kode-tanam-share-blog-pos

Memasang konten video dari Vimeo

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.

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 kopi 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.

kode-tanam-link-video

Contoh kode tanam yang dihasilkan EmbedResponsively

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”>

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 permasalahan 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 videowrap 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 memberikan sedikit sentuhan CSS, masukan kode berikut ke dalam template blogger.

.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.

Silahkan tulis pertanyaan dan saran kamu di kolom komentar di bawah ini. Dan kalau pos ini membantu kamu, jangan segan untuk berbagi dengan yang lain ya.

Posted in Tutorial.

Tulis komentar kamu di sini...

Be the First to Comment!

Notify of
avatar
wpDiscuz