Halo sobat blogger.
Seperti kita ketahui bahwa related post dan popular post menggunakan thumbnail Blogger. Dan thumbnail tersebut di ambil dari gambar pertama di postingan blog yang diupload melalui editor postingan.
Jadi untuk menampilkan thumbnail video Youtube di related posts dan popular posts pada blogger / wordpress, kita bisa menggunakan dua cara
1. Dengan mengupload thumbnail video Youtube di postingan.
Untuk mendapatkan thumbnail video Youtube, bisa menggunakan URL berikut:
-
<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 bisa anda lihat di postingan saya yang ada di http://www.bsm-computer.com/2017/10/Contoh-Hasil-Thumbnail-Video-dari-Youtube-Di-Related-Post-dan-Recent-Blogger.html
Selamat mencoba.
Seperti kita ketahui bahwa related post dan popular post menggunakan thumbnail Blogger. Dan thumbnail tersebut di ambil dari gambar pertama di postingan blog yang diupload melalui editor postingan.
Jadi untuk menampilkan thumbnail video Youtube di related posts dan popular posts pada blogger / wordpress, kita bisa menggunakan dua cara
1. Dengan mengupload thumbnail video Youtube di postingan.
Untuk mendapatkan thumbnail video Youtube, bisa menggunakan URL berikut:
http://img.youtube.com/vi/VIDEO-ID/0.jpg atauhttp://img.youtube.com/vi/VIDEO-ID/default.jpg – full size thumbhttp://img.youtube.com/vi/VIDEO-ID/mqdefault.jpg – medium defaulthttp://img.youtube.com/vi/VIDEO-ID/maxresdefault.jpg – high resolutionhttp://img.youtube.com/vi/VIDEO-ID/1.jpg – small thumbhttp://img.youtube.com/vi/VIDEO-ID/2.jpg – small thumbhttp://img.youtube.com/vi/VIDEO-ID/3.jpg – small thumbVIDEO-ID Harus anda ganti dengan kode unik video dari youtube. misal URL Videonya https://www.youtube.com/watch?v=X22kKZ98oCY - Maka kode uniknya adalah X22kKZ98oCY- Dan URL thumbnailnya menjadi http://img.youtube.com/vi/X22kKZ98oCY-
http://img.youtube.com bisa diganti dengan short URL http://i.ytimg.com2. 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=X22kKZ98oCYmaka 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>
Kode gambar thumbnail diambil dari url id video youtube. Lihat yang saya kotak merah.
Hasilnya bisa anda lihat di postingan saya yang ada di http://www.bsm-computer.com/2017/10/Contoh-Hasil-Thumbnail-Video-dari-Youtube-Di-Related-Post-dan-Recent-Blogger.html
Selamat mencoba.
