Cara Memasang Video YouTube Responsive di Blog

Penggunaan properti video dalam sebuah artikel blog makin marak sejak YouTube meluncurkan fitur embed video. Fitur ini memungkinkan kita untuk menayangkan video YouTube secara langsung di blog / web kita. Yang jadi masalah adalah tampilan video YouTube tidak responsive meskipun template blog yang kita gunakan sudah responsive. Untuk itu kita perlu menambahkan beberapa kode agar video YouTube menjadi responsive di blog.

Pada kesempatan ini saya akan menjelaskan dua cara untuk memasang embed video YouTube di blog, serta cara mendapatkan kode embed video YouTube dengan HP Android, beserta keterangan terkait embed video YouTube di blog.

Cara langsung
Yaitu dengan memasang kode embed video YouTube di dalam tag iframe. Meskipun penggunaan tag iframe di dalam postingan dikatakan kurang baik dalam hal SEO, menurut situs-situs SEO checker. Akan tetapi cara ini memiliki beberapa kelebihan, diantaranya adalah sebagai berikut.

1. Embed video YouTube lebih cepat dimuat
2. Background image cover dari video YouTube bisa tampil menjadi gambar thumbnail, jika posisinya sebagai gambar pertama dari sebuah postingan.

Pemasangan

Untuk membuat video YouTube responsive di blog, letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style> pada template blog Anda. Atau bisa juga di dalam postingan pada mode HTML dengan dibungkus tag style.

.embedded-video-large{background-color:#000;background-position:center;background-size:cover;cursor:pointer;display:inline-block; width: 400px; height: 230px; max-width:100%;overflow:hidden;position:relative}
.videoyoutube{text-align:center;margin:20px auto;width:80%;}
.video-responsive{position:relative;padding-bottom:56.25%;overflow:hidden;margin:8px}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media screen and (max-width:400px){
.videoyoutube{width:100%}
}

Cara memasang video YouTube di postingan blog

Untuk memasang video YouTube, gunakan format kode di bawah ini untuk memanggil / menampilkan embed video YouTube di blog. Tempatkan kode tersebut pada mode HTML, saat Anda membuat artikel / postingan.

<div class="videoyoutube">
<div class="video-responsive">
<iframe allowfullscreen="1" class="embedded-video-large" src="https://www.youtube.com/embed/KODE_ID_VIDEO?rel=0"></iframe>
</div>
</div>

Ganti tulisan KODE_ID_VIDEO dengan kode id video YouTube yang ingin Anda embed untuk ditampilkan di blog.

Keterangan:

• Kode allowfullscreen="1" fungsinya untuk memunculkan tombol layar penuh / full screen.
• Kode rel=0 fungsinya agar di akhir video tidak ditampilkan video terkait, biasanya ada 50 vidoe terkait dan jika di klik maka akan langsung di putar di YouTube, bukan di blog Anda.

Contoh video Youtube responsive

Sumber: https://youtu.be/UtjFu8c_goE (ascadamusic)


Bagaimana cara agar tampilan video YouTube seperti ada di dalam tv (membuat efek monitor)?

Tambahkan kode css di bawah ini ke dalam kumpulan CSS di atas.

.videoyoutube{background:linear-gradient(to bottom,#303030 0%,#202020);border:1px solid #404040;border-bottom:1px solid #303030;border-radius:5px;box-shadow:1px 30px 30px -26px #000000}

Sumber: https://youtu.be/lq_LKae3-Q4 (Alby boy)

Menggunakan javascript

Fungsi javascript disini adalah untuk mengubah kode di dalam tag apa saja yang menggunakan class yang ditentukan, menjadi tag iframe. Jadi sebenarnya ini hanya untuk mengakali atau sekedar untuk menghindari penggunaan tag iframe secara langsung di dalam postingan. Biar lebih SEO "katanya". Namun demikian, cara ini juga memiliki beberapa kelemahan, diantaranya adalah sebagai berikut.

1. Background image yang dihasilkan tidak bisa tampil sebagai gambar thumbnail. Alasannya "masih menjadi misteri"???
2. Pemuatan konten vidoe lebih lama karena umumnya javascript ditempatkan pada tag body bagian terbawah "dimuat belakangan".

Pemasangan

Tempatkan kode CSS berikut ini di atas kode ]]></b:skin> atau </style>.

.videoyoutube{text-align:center;margin:20px auto;width:400px; max-width:80%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px}
.video-responsive iframe{position:absolute;top:0;left:0;width:400px;height:230px;max-width:100%; max-height:100%;border:0}
@media screen and (max-width:400px) {
.videoyoutube{max-width:100%}
}

Pasang kode javascript berikut ini diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){$('.video-youtube').each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="1"></iframe>')})},5000);
//]]>
</script>

Pastikan di dalam template anda telah terdapat kode jquery versi berapa saja. Jika belum ada silahkan pasang kode jquery berikut ini di atas kode </body>.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Cara menampilkan video YouTube di blog

Untuk memanggil / menampilkan embed video YouTube pada artikel blog, Anda cukup gunakan kode berikut ini pada mode HTML pada saat membuat artikel / postingan.

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/KODE_ID_VIDEO?rel=0">
</div>
</div>
</div>

Ganti tulisan KODE_ID_VIDEO dengan kode id video YouTube yang ingin Anda embed untuk ditampilkan di blog.

Catatan : untuk keterangan kode, dan cara membuat efek monitor, Anda bisa menggunakan kode CSS yang sama seperti pada cara pertama di atas.

Cara mendapatkan kode embed video YouTube lewat HP Android

Dari beberapa tutorial tentang cara membuat video YouTube responsive, kebanyakan mereka menggunakan desktop sebagai media untuk mendapatkan kode embed video YouTube. Jadi ketika saya mempraktekkan tutorial tersebut, saya menemukan kendala lantaran perangkat yang tersedia hanya sebuah hp Android. Tapi itu tidak menghalangi niat saya, karena saya yakin pasti ada jalan alternatif untuk mencapai suatu tujuan, jika kita mau berusaha. Berikut cara untuk mendapatkan kode embed sebuah video YouTube.

1. Buka aplikasi YouTube di hp / smartphone Android Anda.
2. Cari video yang ingin Anda ambil kode embed nya.
3. Setelah ketemu, klik tombol titik tiga di samping kanan video tersebut.
4. Pilih / klik Bagikan, kemudian pada munculan jendala baru klik Salin tautan.
5. Tempel / pastekan url tersebut di draf postingan, tab browser, atau dimana saja Anda bisa. contoh url video YouTube : https://youtu.be/qLrWHuOQPOQ
6. Copy kode paling belakang dari url tersebut, biasanya berupa kombinasi huruf besar dan kecil. Itu adalah KOE_ID_VIDEO yang bisa Anda gunakan untuk memasang embed video YouTube tersebut, dengan format seperti yang sudah di jelaskan di atas.