Metode Membuat Custom Thumbnail Youtube di Postingan

Metode Membuat Custom Thumbnail Youtube di Postingan - Jika kalian memasukan Video Youtube di Postingan. Jika ingin beda yang lainnya. Maka cobalah cara berikut ini.

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.

Penerapan Custom Thumbnail Youtube di Postingan

Buat postingan > Terapkan kode pemanggil di bawah ini di dalam postingan (Mode HTML)

<div  class='youtube' data-id='mbPO4FPAX1Y'><iframe id="add" style="display:none" width="100%" height="330" src="//www.youtube.com/embed/mbPO4FPAX1Y?rel=0" frameborder="0" allowfullscreen></iframe><div id="remove"><a href="https://www.youtube.com/watch?v=mbPO4FPAX1Y"><img class='thumb' src="http://i.ytimg.com/vi/mbPO4FPAX1Y/hqdefault.jpg"/></a><div class='play' id="play"></div></div></div>

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

Misal link video youtube seperti ini

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

Salin kode yang ditandai warna merah 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=mbPO4FPAX1Y?autoplay=1

Demo
click to view

Dengan trik ini pun gambar dari link video youtube akan muncul di post halaman utama blog anda.
Semoga bermanfaat.
Website sementara masih dalam kondisi perbaikan, untuk sementara website utama beralih ke Jumbo Cell