Como mostrar una imagen mientras se carga un vídeo

16 de May de 2008 | Categoría: CSS, Tutoriales

El titulo no se si es lo suficientemente descriptivo como para entender el contenido de esta entrada, pero, básicamente, lo que vamos a hacer es que mientras que los vídeos de nuestra web cargan se muestre una imagen indicando que el vídeo esta cargando.

Todo ello usando solamente CSS. La técnica es sencilla, consiste en darle estilo al div del vídeo para que muestre una imagen de fondo, una vez que el vídeo cargue, la imagen quedará en el fondo y conseguiremos ese efecto de imagen de carga que buscamos. El código CSS quedaría de la siguiente forma:

.video {
border: 20px solid #825948;
background: url(video-bg.gif) center no-repeat;
margin: auto;
background-color: #825948;
height: 355px;
width: 425px;
}

Por supuesto el código anterior es personalizable, yo además a añadido un borde y lo he alineado al centro, pero cada uno lo puede personalizar a su gusto.

El código Html sería algo así:

<div class="video"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/KA2B5X0LhMY&amp;hl=en" /><embed type="application/x-shockwave-flash" width="425" height="355" src="http://www.youtube.com/v/KA2B5X0LhMY&amp;hl=en" wmode="transparent"></embed></object></div>

Podeís ver un ejemplo de como queda el código o descargar la imagen que he usado en el ejemplo.

 
Enlace permanente | 4 Comentarios →