Cómo hacer Miniaturas personalizadas Youtube Mensajes

Comparteme :

Esta vez voy a compartir sencillos
consejos sobre cómo crear una miniatura de vídeo de youtube de encargo usando
CSS
jQuery
HTML.

Inicie sesión en Blogger >
Abrir plantilla >
Edición de HTML
Colocar el siguiente codigo antes de Estilos ]] ></b:skin>

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

Copiar y luego aplicar el código de abajo antes </body>

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

Guardar la plantilla.
Aplicar en el post
Crear una entrada >
Aplicar el siguiente código en cualquier entrada 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>

Cambiar todo el código de vídeo de youtube con el código de vídeo que desee

Por ejemplo, como el enlace de vídeo de youtube

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

Copia el código marcado en el código HTML anterior.

Si desea ver en la reproducción automática de vídeo, por favor agregue autoplay=1 adeante de su
enlace de youtube

EJEMPLO:

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

Demostración

Con este truco también veras las imágenes de youtube aparecerá en la página principal de
su entrada en el blog.

Nota: Para los que usan una plantilla de Lycoris 2 simplemente se aplican al código
HTML en el post

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Cómo hacer Miniaturas personalizadas Youtube Mensajes.

Comparte