Menampilkan Video YouTube/Vimeo Serta Validasi W3C

Menampilkan Video YouTube/Vimeo Serta Validasi W3C - Adakalanya kita membutuhkan referensi sebuah video untuk ditampilkan pada blog sebagai pelengkap atau sebagai bahan pendukung artikel yang kita tulis, baik video yang kita upload sendiri (hosting) ataupun video yang berasal dari situs penyedia video seperti YouTube atau Vimeo yang sifatnya umum dan bebas untuk dibagikan (menurut pemilik video).

Pemilihan video yang akan kita tampilkan pada web/blog tentunya mempunyai caranya masing-masing, baik itu link embed video maupun script secara keseluruhan untuk menampilkan video yang kita pilih, dalam hal ini kita akan bercerita bagaimana caranya menampilkan video dari situs penyedia video YouTube dan Vimeo.

Menampilkan Video YouTube

Setelah kita masuk pada situs YouTube melalui http://www.youtube.com - pilih video yang akan kita tampilkan - perhatikan menu dibawah video dan pilih "Bagi" dan pada sub menu pilih "Sematkan" (dalam bahasa Indonesia), ambil script yang diberikan oleh pihak youtube, script tersebut adalah script untuk menampilkan video yang dimaksud. Contoh scriptnya seperti ini:

<iframe width="420" height="315" src="//www.youtube.com/embed/vVyKEgzOEIQ" frameborder="0" allowfullscreen></iframe>

Sematkan script tersebut pada posting (dalam mode HTML) atau pada tempat lain dimana kita ingin menampilkan video tersebut.

Menampilkan Video Vimeo

Tidak jauh berbeda dengan situs youtube, setelah masuk situs vimeo melalui http://www.vimeo.com - pilih video yang akan ditampilkan dan pilih menu "Share" yang ada pada layar video kemudian ambil script yang diberikan pihak vimeo pada point Embed Video, contoh scriptnya seperti ini:

<iframe src="http://player.vimeo.com/video/71716158?title=0&amp;portrait=0&amp;badge=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/71716158">SUSTENANCE</a> from <a href="http://vimeo.com/mattkleiner">Matt Kleiner</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

Untuk penggunaanya sama seperti kita memasang video youtube diatas.

Terlihat lebih panjang scriptnya tapi kalau diperhatikan sama dengan script milik youtube, hanya saja ada penambahan link pemilik yang dibungkus pada tag <p>, dengan mengambil script pada tag <iframe> saja sudah cukup bisa untuk menampilkan videonya tanpa perlu menambahkan pembungkus tag <p> yang berisi link pemilik video, karena tanpa itu juga nama pemilik sudah tampil pada bagian atas video.

Penghapusan tag <p> yang berisi link pemilik akan mempersingkat script sehingga menjadi seperti ini:

<iframe src="http://player.vimeo.com/video/71716158?title=0&amp;portrait=0&amp;badge=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

① Membuat Responsive Tampilan Video Diberbagai Ukuran Layar

Validasi W3C

Sayangnya script yang diberikan pihak youtube maupun vimeo terdeteksi tidak valid menurut W3C, bagi yang menganggap validasi W3C itu tidak penting kita bisa abaikan peringatan itu, toh video masih tetap bisa tampil tanpa kurang satu apapun, tapi bagi yang mementingkan kevalidan supaya lebih sempurna web/blognya, kita bisa memperbaiki peringatan error tersebut.

Setelah kita mengecek ke-valid-an pada W3C tentunya akan ada keterangan error pada bagian tertentu, dan dalam hal ini adalah pada bagian frameborder, untuk mengurangai tingkat error pada W3C kita bisa membuang atribut frameborder tersebut, sehingga scriptnya menjadi seperti ini:

<iframe width="420" height="315" src="//www.youtube.com/embed/vVyKEgzOEIQ" allowfullscreen></iframe>

Selain mem-validasi pada W3C kita juga perlu memperhatihan Responsivitas dari tampilan video yang di pajang pada web/blog.

Semoga bermanfaat,