Cara Membuat Thumnail Uplod Youtube Di Blog - CH MIKO

7/16/18

Cara Membuat Thumnail Uplod Youtube Di Blog


Pertama buka Blog > Edit HTML > Copast code berikut di bawah <head>

<!--thumnail youtube-->
<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;
}
</style>

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

<!--<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>-->
<!--thumnail youtube-->

Untuk menggunakan code ini agar berfungsi caranya Copast code ini dipost blog kalian. Kemudia ganti code ini mbPO4FPAX1Y dengan alamat youtube yang ingin di upload di blog
<div class="youtube" data-id="mbPO4FPAX1Y">
<iframe allowfullscreen="" frameborder="0" height="330" id="add" src="//www.youtube.com/embed/mbPO4FPAX1Y?rel=0" style="display: none;" width="100%"></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>

Contoh Youtube Thumnail




Share with your friends

Featured

[Featured][recentbylabel]