quinta-feira, 10 de setembro de 2015

Youtube Custom Thumbnail para Blogger


youtube-post-thumbnail-para-blogger
                                                                         
                                                                          DEMO

Hoje vamos mostrar aqui como adicionar um efeito bonito colocando uma skin no video quando adicionado no seu blogger para ter um efeito mais profissional quando colocar um video no seu blogger.

Para adicionar isso siga os passos

Faça login no blogger 
Clique no menu modelo logo em seguida Editar Html 
com as teclas combinadas CTRL+F busque por </style> ou ]]>< logo acima copie e cole o código abaixo.

.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;
}

Agora procure por </body> copie o código abaixo e cole antes 

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

Salve o modelo

Parte 2 
Para adicionar o vídeo no seu post clique em criar novo post clique na aba html e adicione o código abaixo.

<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>


Nota: você precisa copiar a url do video youtube e substituir bem como o id do video na tag src você pode colocar a foto que deseja que apareça na capa do video.




NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner