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.
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/AVvXsEhLWPSUfyV89H7_Cv-Mh15BdV0IUkoYGfUnDUHLeeC7qBwIQhrvI6CZOmW-KVCiCat7qSNg-jd9fn7Ewb1DnFIwx4ptk_b7eOZNdSz3idtHtgurlyQBOhWxAGag9cle5IO8maCBLNH-fbw/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/AVvXsEi3Oq5lMU5wJBcGb-XGaOmBTBWVA0VUjQLkweHdYjbO6X391IIAC6djn6xu_rGEZKfdWVzYKSIFDFeIth-dRr4EKBYolI_WDEa4o_USqEWhB-xcuK8hC4Pky_Gmfu_L-16LvKugi6dKfQT1/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. ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...
Enlaza el blog ...
Ultimos comentarios
