Cara Custom Thumbnail YouTube Menggunakan CSS, JQuery dan HTML

Pada kesempatan kali ini Mas Dar akan share tutorial lagi kepada kamu semua yaitu Cara Custom Thumbnail 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="http://i.ytimg.com/vi/vX2vsvdq8nw/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

• Result

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

Semoga bermanfaat.

Share :