Ir al contenido principal

Galeria de Video

Galeria de Video HTML | Sin levantar el lápiz




Nadie se preocupe, sólo me dieron ganas de publicar un tutorial de un invento que se me ocurrió.

Ya he visto muchas galerias de video como la que utiliza Coda Slider, y otras . Acá hay una muy simple que no necesita instalar scripts y sólo utiliza CSS.


Ejemplo:





Tutorial:

Para Blogger:

En un gadget HTML/Javascript o en una entrada pegar:

<div id="videobox">
<iframe name="videog" width="420" height="315" src="http://www.youtube-nocookie.com/embed/vspLNRpi4BQ?rel=0" frameborder="0" allowfullscreen></iframe>
<div style="float:right;overflow:auto;width:130px;height:315px;">

<div class="mini"><a href="http://www.youtube-nocookie.com/embed/IDVIDEO?rel=0" target="videog"><img title="Descripción video 2" alt="Descrición video 2" src="URL imágen video 2" width="100px" /><td style="text-align: center;">
Descripción Video 2
</td></a></div>

<div class="mini"><a href="http://www.youtube-nocookie.com/embed/IDVIDEO?rel=0" target="videog"><img title="Descripción video 3" alt="Descrición video 3" src="URL imágen video 3" width="100px" /><td style="text-align: center;">
Descripción Video 3
</td></a></div>

 <div class="mini"><a href="http://www.youtube-nocookie.com/embed/IDVIDEO?rel=0" target="videog"><img title="Descripción video 4" alt="Descrición video 4" src="URL imágen video 4" width="100px" /><td style="text-align: center;">
Descripción Video 4
</td></a></div>

<div class="mini"><a href="http://www.youtube-nocookie.com/embed/IDVIDEO?rel=0" target="videog"><img title="Descripción video 5" alt="Descrición video 5" src="URL imágen video 5" width="100px" /><td style="text-align: center;">
Descripción Video 5
</td></a></div>
</div>
</div> 


En el caso de querer agregar más miniaturas se pega esto justo antes de los dos últimos </div>:

<div class="mini"><a href="http://www.youtube-nocookie.com/embed/IDVIDEO?rel=0" target="videog"><img title="Descripción video" alt="Descrición video" src="URL imágen video" width="100px" /><td style="text-align: center;">Descripción Video </td></a></div>


Y en la planilla de estilos:

#videobox {
width:575px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;>
border-radius: 10px;
background:#CCCCCC;  /* Fondo VideoBox */
border:1px solid #5A5A5A;
padding:10px; -moz-box-shadow: 0px 0px 30px #E3E3E3;
-webkit-box-shadow: 0px 0px 30px #E3E3E3;
box-shadow: 0px 0px 30px #E3E3E3;}
.mini {
background: #ffffff;  /* Fondo miniatura */
-webkit-border-radius:3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding:5px;
height:73px;
width:100px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
}
.mini:hover {
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
height:130px;}
Invitame un café en cafecito.app
Etiquetas:

Comentarios

  1. kwon sang woo3/5/12

    que parte de la plantilla de bloger son los estilos le puse antes de b skin y antes de head y en ninguna funicono :(

    ResponderEliminar
    Respuestas
    1. Lucas Maidana4/5/12

      Debes pegarlos antes de ]]></b:skin>

      Espero que ahora funcione. Saludos

      Eliminar
  2. Anónimo24/9/13

    muchas gracias amigo estaba buscando esto desde rato , pero los que encontraba no me servian y tenian muchos codigos , me gusta este es muy bueno simple y cumple con la funcion gracias buenos post

    ResponderEliminar
  3. Anónimo24/9/13

    tambien me gustaria saber como cambiarlo de tamaño mas grande ya que el ancho de mi web es grande

    ResponderEliminar

Publicar un comentario

Más leído

Galería de Imágenes Simple, con Javascript y CSS

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple. Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos: <div id="galeria"> <div id="galeria_imagen"> <img id="imgGaleria" src=" URL-IMAGEN-POR-DEFECTO " /></div> <div id="galeria_miniaturas"> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-1 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-2 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-3 " /> <img class="miniatura" onclick="javascript:document.getEle...
31 comentarios
seguir »

Ventana flotante con botón cerrar

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón. Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto. <div id='ventana-flotante'>    <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>    <div id='contenedor'>        <div class='contenido'> Aquí va el mensaje.        </div>    </div> </div> <style> #ventana-flotante { width: 360px;   /* Ancho de la ventana */ height: 90px;   /* Alto de la ventana */ background: #ceffad;   /* Color de fondo */ posi...
16 comentarios
seguir »

Tabs, menú de contenidos con pestañas. Versión CSS

Seguro conocerás este sistema de pestañas, que nos permite mostrar de manera alternativa distintos contenidos en un mismo espacio. Hay distintas versiones como con jQuery , o utilizando CSS, más específicamente la pseudoclase :target . Aquí veremos como obtener un resultado similar, pero utilizando la pseudoclase :checked. Comencemos con la estructura. <div id="contenedor">     <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />     <label for="tab-1" class="tab-label-1"> Pestaña1 </label>         <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />     <label for="tab-2" class="tab-label-2"> Pestaña2 </label>         <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />     ...
16 comentarios
seguir »

Efecto biselado con CSS

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra. Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow . Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve. HTML <div class="biselado"> Texto </div> Hola, soy un cuadro con outset. .biselado { background: #2323ff ;   /* Fondo, debe ser más claro que el borde */ border: 5px outset #4444ff ;   /* Grosor del Borde */   /* Color del Borde */ color: white ;   /* Color del texto */ text-align: center ;   /* Alineación del texto */ text-shadow: -1px -1px rgba(0,0,0,.2); } O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset . Hola, soy un cuadro con inset. Veamos ahora una manera más ef...
Publicar un comentario
seguir »

Botón circular 3D realista con CSS

El secreto está en la propiedad box-shadow . Luego border-radius para darle forma y ya lo obtenemos. See the Pen Botón tridimensional realista. by Lucas Maidana ( @LucasMaidana ) on CodePen . El HTML típico de un botón. <a class='boton' href='URL-DEL-BOTON'></a> Y el CSS. .boton {   background: url( http://www.ashleyjt.net/windows/images/Android.png )  /* Url de la imagen */  no-repeat center center, #62BC0F /* Color del botón */ ; background-size: 60%;  /* Tamaño de la imagen */   height: 200px;   /* Alto del botón */   width: 200px;   /* Ancho del botón */   display: table;   border-radius: 100%;   cursor: pointer;     box-shadow: /* Sombras externa */ inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), /* Sombra interna */ 0 5px 20px rgba(0,0,0,.1); } /* Al presionar */ .boton:active { ...
Publicar un comentario
seguir »

Texto con borde

¿TEXTO CON BORDE? ¿Posible hacerlo sólo con CSS? SI ES POSIBLE NOTA : Esta propiedad no es compatible con todos los navegadores. Se recomienda Chrome o Firefox. Para lograrlo, debemos aplicar la propiedad text-shadow  para lograr muchas sombras del mismo color simulando un sólo borde. A <div class="texto1"> Texto </div> le aplicaremos: .texto1 { color:white;   /* Color del texto */ text-shadow: 1px 1px 0 blue ,                   -1px -1px blue ,                    1px -1px blue ,                   -1px 1px blue ,                    0 1px blue ,                    1px 0 blue ,                   -1px 0 blue ,                 ...
Publicar un comentario
seguir »