Menampilkan Thumbnail Video Youtube di Post Blogger

Seperti kita ketahui bahwa related post dan popular post akan memuncukaln thumbnail (istilah untuk gambar kecil yang mewakili gambar besar / video). Dan thumbnail tersebut di ambil dari gambar pertama di dalam postingan blog Anda yang diupload melalui editor postingan.

Jadi untuk menampilkan thumbnail video Youtube di pada blogger / wordpress, kita bisa menggunakan dua cara:

Cara Pertama. Dengan mengupload thumbnail video Youtube secara manual di postingan.

Untuk mendapatkan thumbnail video Youtube, bisa menggunakan URL berikut:

http://img.youtube.com/vi/VIDEO-ID/0.jpg atau

http://img.youtube.com/vi/VIDEO-ID/default.jpg – full size thumb

http://img.youtube.com/vi/VIDEO-ID/mqdefault.jpg – medium default

http://img.youtube.com/vi/VIDEO-ID/maxresdefault.jpg – high resolution

http://img.youtube.com/vi/VIDEO-ID/1.jpg – small thumb

http://img.youtube.com/vi/VIDEO-ID/2.jpg – small thumb

http://img.youtube.com/vi/VIDEO-ID/3.jpg – small thumb

VIDEO-ID harus anda ganti dengan kode unik video dari youtube, misal URL Videonya sebagai berikut:

https://www.youtube.com/watch?v=X22kKZ98oCY

- Maka kode uniknya adalah X22kKZ98oCY
- Dan URL thumbnailnya menjadi http://img.youtube.com/vi/X22kKZ98oCY/0.jpg
- http://img.youtube.com bisa diganti dengan short URL http://i2.ytimg.com

<img border="0" src="http://i2.ytimg.com/vi/X22kKZ98oCY/maxresdefault.jpg" height="0" width="0" />


Cara kedua lebih mudah.

Anda tinggal memasang kode html gambar (URL gambar ambil langsung dari URL video youtube ) dan jangan lupa bagian kode pengaturan size gambar, atur ke angka 0. Hal ini agar gambar hanya tampil sebagai thumbnail dan tidak akan tampil pada halaman posting.

Saya ambil contoh mencoba tampilkan gambar video youtube dengan alamat ini https://www.youtube.com/watch?v=X22kKZ98oCY

Maka kode yang harus dipasang adalah seperti dibawah ini:

<div class="separator" style="clear: both; text-align: center;">

<img border="0" src="http://img.youtube.com/vi/X22kKZ98oCY/0.jpg" data-original-height="360" data-original-width="480" height="0" width="0" /></div>

<iframe width="560" height="315" src="https://www.youtube.com/embed/X22kKZ98oCY?rel=0" frameborder="0" allowfullscreen></iframe>

Hasilnya akan seperti di bawah ini: