Uno de los elementos que vemos seguido y que aportan mucho a los sitios webs, es la utilización de videos de fondo.
Aquí veremos como colocar videos por debajo de los contenidos usando HTML5.
Una de los avances que ha aportado HTML5 es la reproducción de audio y video de forma nativa, sin la utilización de reproductores externos ni del viejo Flash.
Con HTML5 no solo podemos reproducir un video normalmente, sino que incluso podemos usar el mismo como fondo de nuestros contenidos; algo muy usual en estos días.
Lo primero que vamos a hacer es insertar nuestro video utilizando la etiqueta VIDEO de HTML5.
Dentro de nuestro BODY entonces colocamos:
<video id="mivideo" autoplay="autoplay" loop> <source src="clip.mp4" type="video/mp4"></source> </video>
En este caso estamos insertando un video en formato MP4, para la cual usamos el elemento SOURCE con los atributos SRC para el nombre del video y TYPE para especificar el formato.
Y por medio del atributo AUTOPLAY le especificamos que se reproduzco automáticamente, y con el agregado de LOOP hacemos que vuelva a comenzar al llegar al final.
NOTA: los diferentes navegadores soportan diferentes formatos de video. En “Experto en HTML5” vemos todos los formatos y como convertir de un formato a otro.
Hasta aquí hemos insertado el video como elemento HTML5 y ahora con CSS vamos a colocarlo de fondo de pantalla para poder poner elementos sobre el mismo.
Para esto trabajamos con algunas propiedades CSS sobre el mismo elementos VIDEO.
Primero especificamos un alto y ancho mínimos del 100% del contenedor y al mismo tiempo en automático:
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
Hasta aquí el video se mostrará como un elemento mas del documento y no estará de fondo.
Para ellos vamos a utilizar la propiedad “POSITION: fixed” para quitarlo el flujo de elementos normales del documento, y lo ubicaremos arriba a la izquierda y lo centraremos al 50%.
Para esto agregamos al CSS de la etiqueta VIDEO:
position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
Ahora lo desplazaremos hacia atrás de los elementos el sitio web utilizando la propiedad Z-INDEX con un valor del “-100” (hacia atrás):
z-index: -100;
Y por ultimo utilizamos la propiedad “background-size: cover;” para que el video ocupe todo el fondo.
Entonces nuestro CSS finalmente quedaría de esta forma:
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -100;
background-size: cover;
}
De esta forma podemos colocar nuestro video como fondo o background en HTML5 y colocar elementos sobre el mismo.
VER y DESCARGAR el ejemplo:
Mira funcionando y Descarga todos los códigos de ejemplo para usarlos en tus páginas:
[sociallocker id=»2659″]
>> Ver el ejemplo <<
>> Descarga el ejemplo <<
[/sociallocker]
Recurso Recomendado:
Si te interesa aprender todo sobre HTML5 para crear sitios modernos y sacarle el máximo provecho, te invito a mi curso completo de HTML5.
En este curso te enseño HTML5 a fondo: etiquetas, maquetación, formularios, audio, video, animaciones, canvas (lienzo), validación de datos y mucho mas! >> Ir al curso de HTML5
Me gustaría que me dejes tus comentarios aquí debajo.
Saludos!
Cristian
hola