Update, Cara Menampilkan Otomatis Thumbnail Video Youtube Di Related Posts Dan Pop Posts Blogger
Halo sobat blogger.
Seperti kita ketahui bahwa related post dan pop post menggunakan thumbnail Blogger. Dan thumbnail tersebut di ambil dari gambar pertama di postingan weblog yang diupload melalui editor postingan.
Jadi untuk menampilkan thumbnail video Youtube di related posts dan pop 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 https://xpeienceingame.blogspot.com/search?q=Contoh-Hasil-Thumbnail-Video-dari-Youtube-Di-Related-Post-dan-Recent-Blogger
Selamat mencoba.
Seperti kita ketahui bahwa related post dan pop post menggunakan thumbnail Blogger. Dan thumbnail tersebut di ambil dari gambar pertama di postingan weblog yang diupload melalui editor postingan.
Jadi untuk menampilkan thumbnail video Youtube di related posts dan pop 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
– amount 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-scale thumbhttp://img.youtube.com/vi/VIDEO-ID/2.jpg
– small-scale thumbhttp://img.youtube.com/vi/VIDEO-ID/3.jpg
– small-scale 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
/0.jpg
-
http://img.youtube.com
bisa diganti dengan brusk URL http://i.ytimg.com
2. 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>
Kode gambar thumbnail diambil dari url id video youtube. Lihat yang saya kotak merah.
Hasilnya bisa anda lihat di postingan saya yang ada di https://xpeienceingame.blogspot.com/search?q=Contoh-Hasil-Thumbnail-Video-dari-Youtube-Di-Related-Post-dan-Recent-Blogger
Selamat mencoba.
Comments
Post a Comment