Vídeo Galería con Css y Javascript

Mi nuevo proyecto.

Se puede configurar desde el estilo CSS.

El código se debe colocar en un gadget HTML abajo de la cabecera.

Esta configurado para un ancho de 1000px, y para mostrar 16 vídeos.

Si se quiere se puede quitar o agregar vídeos.

Solo agregar o quitar la siguiente línea.

<a href="http://www.youtube.com/v/boDvXJLau1A" onclick="return cambiarvideo(this.href)" title="Video 2"><img src="http://img.youtube.com/vi/boDvXJLau1A/default.jpg" /></a>

El link del vídeo:

http://www.youtube.com/v/boDvXJLau1A

Cambiar la ID del vídeo (boDvXJLau1A) por la ID del vídeo a mostrar.

La medida del vídeo son de 425 x 344. (Se puede cambiar desde el código Javascript)


La imagen a mostrar:

http://img.youtube.com/vi/boDvXJLau1A/default.jpg

Cambiar la ID (boDvXJLau1A) que es el misma ID del vídeo.

De esta forma generamos una imagen thumbnail.

La medida de las imágenes son de 100px x 70px. (Se puede cambiar desde el estilo CSS)


Pueden elegir cuatro formas de mostrar el vídeo.

Los ejemplos y su respectivo código se encuentra en cada entrada.

• El vídeo se muestra a la derecha
• El vídeo se muestra a la izquierda
• El vídeo se muestra arriba
• El vídeo se muestra abajo

Ejemplo del CSS del vídeo mostrado a la derecha:

         ........Imagen thumbnail.........
.contvideogaleria img{width:100px;height:70px;padding:5px;border:1px solid #fff}

         ........El cuerpo contenedor y la imagen a la izquierda.........

.contvideogaleria{width:100%;float:left;background:black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZsBw-6Pz74r0piFxanmjczny3yNpkTf-zwR4OV08TT5WivBox4SWq6OVJK-uschlOe3rTfxx-9tfWTnXwfP-luj8ouvxsk1rZpDudGAxluR9HcS2yzuCbYX6UjFnPsx8Y2jzpLyhTjlU/s1600/youtube.png) no-repeat center left;}

         ........El cuerpo contenedor de las imágenes thumbnail.........
.contvideogaleria .contvideogaleriaimg{margin:20px;margin-left:30px;/margin-left:20px;margin-right:5px}

         ........El cuerpo contenedor del vídeo.........
.contvideogaleria #videogaleria{float:right;margin-right:20px;margin-top:15px;background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbeVK41kCyQtuvpMMg_XvOStG0QCqgYKu5p1zAEI_TiA0uAQd8ohGnEu90ixMJrdNQ_DWX60_YerxT3BVla8sAEyz8QqudoSVekg0PAbSomRyIkSiMByivkYDjvqmKBuANXetbbBr0luu/s1600/video-galeria-vku.png) no-repeat center ;}

Personalizar cambiando medidas, borde, imagen de la izquierda, color del fondo y margenes.

Notarán que hay margenes que tienen delante un /, esto es solo para Internet Explorer.

Los comentarios dejarlos en esta entrada y no en el blog de los ejemplos.

Espero que les sea de utilidad.