Snippet, Tips Blogger

Cara Membuat Custom Thumbnail Youtube di Postingan

Kali ini Aliva akan berbagi tips sederhana cara membuat custom thumbnail video youtube menggunakan CSS, jQuery, dan HTML.

Pertama login ke Blogger > Buka Template > Edit HTML

Salin dan terapkan kode di bawah ini sebelum  </style>

.youtubeBorder{background:none repeat scroll 0 0 #fff;border:1px solid #e0e0e0;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:10px 0 20px;padding:4px}
.youtubeBorder p.post-video{margin:0!important}
.youtube{background-color:#000;max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer;height:330px;width:100%}
.youtube .thumb{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto;opacity:.8}
.youtube .play{opacity:.9;height:77px;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;background:url(http://1.bp.blogspot.com/-UxHkp1GZmYI/VEpXsS2YAeI/AAAAAAAAHH0/kgw4wjcrOvw/s1600/play.png) no-repeat}
.play:hover{opacity:1}

Kemudian Salin dan terapkan kode di bawah ini sebelum </body>

<script>
$(document).ready(function(){
  $("#play").click(function(){
    $("#remove").hide();
    $("#add").show();
  });
});
</script>

Simpan template.

Cara penerapan di postingan

Buat postingan > Terapkan kode pemanggil di bawah ini di dalam postingan Tab HTML

<div  class='youtube' data-id='vX2vsvdq8nw'><iframe id="add" style="display:none" width="100%" height="330" src="//www.youtube.com/embed/vX2vsvdq8nw?rel=0" frameborder="0" allowfullscreen></iframe><div id="remove"><a href="https://www.youtube.com/watch?v=vX2vsvdq8nw"><img class='thumb' src="https://aliva.my.id/wp-content/uploads/2021/07/hqdefault.jpg"/></a><div class='play' id="play"></div></div></div>

Ubah semua kode video youtube ini vX2vsvdq8nw dengan kode video yang anda inginkan.

Misal link video youtube seperti ini

https://www.youtube.com/watch?v=vX2vsvdq8nw
Salin kode yang ditandai ke dalam kode HTML diatas.

Jika ingin memunculkan autoplay pada videonya, silahkan tambahkan  autoplay=1 dibelakang link youtube nya

https://www.youtube.com/watch?v=vX2vsvdq8nw ?autoplay=1

Dengan trik ini pun gambar dari link video youtube akan muncul di post halaman utama blog anda.

Semoga bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *