Miniaturas Personalizadas Nas Postagens

Como Fazer Miniaturas Personalizadas do Youtube Nas Postagens - Desta vez vou compartilhar dicas simples sobre como criar uma miniatura de vídeo do youtube personalizada usando CSS, jQuery e HTML.

1. Faça login em seu blog> Modelo> Editar HTML

2. Em seguida copie e cole o código abaixo antes de</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; }

3. Em seguida copie e cole o código abaixo antes de</body>

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

4. Salvar Modelo.


5. Criar Postagens> Postagens> Nova Postagem


6. Em seguida copie e cole o código abaixo dentro da postagem


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

Mudar o código de vídeo do youtubembPO4FPAX1Y para o código que você deseja.

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

Se você deseja reprodução automatica adicione autoplay=1

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