Untuk membuat posting blog kita semakin menarik, kadang perlu juga untuk menyertakan video yang bisa kita ambil dari Youtube. Akan lebih baik lagi kalau video yang kita sertakan itu punya kita sendiri. Pasti aman dari kemungkinan dianggap cuman memanfaatkan karya orang lain. Meskipun sebenarnya juga tidak salah-salah amat kalau kita menggunakan url video orang lain dari Youtube. Bisa jadi mereka akan berterima kasih karena akan menambah jumlah page view video yang mereka unggah itu, dan tentu saja, ujung-ujungnya akan menambah pendapatan Adsense Youtube mereka. Kalau videonya punya anda sendiri kan jadi dobel kemungkinannya pendapatan anda, kan? CMIIW sih.
Ok, begini ceritanya. Ini masih berhubungan dengan penyesuaian saya dengan platform blogging WordPress. Sebelumnya, saya memposting Tips Menyerang COC Dengan Queen Archer dan Healer. Hehe, karena saya masih main COC meski usia sudah mendekati kepala 4. Tidak terlalu tua untuk main COC kan? Nah, di dalam posting tadi saya sertakan sebuah video dari Youtube yang sebelumnya saya rekam sendiri. Main COC-nya pakai Xperia M dual, merekam-nya pakai Xperia Ray. Tanpa edit apa-apa, saya upload ke Youtube. Harapannya ya supaya laris banyak yang lihat. Sebagai alternatif tambahan pendapatan dari Adsense Youtube. Ternyata tampilannya jelek. Jadi penasaran, bagaimana cara embed video youtube di wordpress responsive ya?
Pertama yang saya lakukan untuk embed video Youtube di blog dee-nesia ini ya hanya dengan mengcopy script iframe yang diberikan Youtube ke dalam postingan. Bisa sih. Masalahnya, tampilan videonya tidak responsive. Kalau dilihat di dekstop memang tidak masalah. Tapi karena pengunjung blog dee-nesia ini kebanyakan memakai smartphone berbasis Android – sampai sekitar 60% -, saya cobalah untuk melihat tampilannya di browser Chrome pada Xperia M dual. Hik… Jelek banget tampilannya. Frame video-nya melebar melewati frame kanan luar. Jadi kalau mau lihat penuh ya harus di geser-geser gitu. nGgak banget pokoknya. Mau tidak mau, harus cari cara supaya video embed-nya tampil responsive di browser mobile. Dengan googling, sampailah saya di http://www.ficripebriyana.com/. Di situ dijelaskan bagaimana cara embed video youtube di wordpress bisa responsive.
Cara Embed Video Youtube di WordPress Responsive
Berikut ini cara embed video youtube di wordpress responsive yang saya ambil dari ficripebriyana.com.
Kalau kita ambil video dari Youtube, maka kita akan mendapatkan kode iframe kurang lebih seperti ini:
<iframe width=”500″ height=”281″ src=”https://www.youtube.com/embed/bX1SqtQsWHo?rel=0″ frameborder=”0″ allowfullscreen></iframe>
Script di atas sudah bisa memunculkan video dari Youtube di dalam postingan kita. Masalahnya, video yang ter-embed tadi tidak responsive, dan juga tidak valid HTML5. Trus bagaimana dunk? Ya kita harus ubah dulu script-nya menjadi seperti ini:
<object width=”500″ height=”281″ data=”//www.youtube.com/embed/bX1SqtQsWHo?rel=0″></object>
Kalau anda mau supaya video selalu berada di tengah, bisa ditambahkan dengan pengaturan text-align: center. Jadi lengkapnya akan seperti ini:
<div style=”text-align: center;”>
<object width=”500″ height=”281″ data=”//www.youtube.com/embed/bX1SqtQsWHo?rel=0″></object>
</div>
Keterangan:
- “text-align: center” membuat video selalu tampil rata tengah.
- width=”500″ berarti lebar video bernilai 500 piksel.
- height=”281″ berarti tinggi tampilan video akan bernilai 281 piksel.
Mau contohnya? Silahkan lihat di posting Tips Menyerang COC Dengan Queen Archer dan Healer tadi. Kalau bisa sih anda melihatnya di browser smartphone. Jadi kelihatan responsive-nya. Kalau di browser desktop, silahkan coba dengan mengubah lebar windows browser anda, atau bisa juga dengan mengaktifkan Inspect Elemen di Firefox, lalu aktifkan Responsive Design Mode.
Sejauh ini hasilnya lumayan, jadi cara embed video youtube di wordpress supaya tampil responsive diatas bisa digunakan. Yang masih terasa kurang adalah perbandingan tinggi dan lebar video di tampilan landscape di browser mobile. Saya belum tahu bagaimana membuatnya lebih responsive lagi. Sementara ini cukuplah.
Untuk anda yang punya cara embed video youtube di wordpress responsive yang lebih baik, minta tolong di share dunk….
Kebetulan neh mau mencoba menggunakan WP Theme, untuk saat ini masih setia dengan blogspot, hanya yang saya tanyakan apakah pemasangan iframe pada WP itu tidak berbahaya pada blog..?
Saya coba tak berhasil
Iya Bang Nasrul. Sebelum saya ganti theme, cara diatas berjalan dengan baik. Ganti theme ke Point ini jadi ndak bisa. Akhirnya, dee-nesia menyerah dan memilih pakai plugin saja. Silahkan coba plugin ARVE Advanced Responsive Video Embedder.
Kalau sekarang sudah bisa paste link langsung gan. Gk perlu embed2, karena wordpress udah bisa langsung embed video YouTube.hehe