Artículos
HTML5

Vídeo como background en HTML5

22/Mar/2016

Una de las cosas que podemos hacer con el elemento vídeo es poner un vídeo como background en HTML5. Es decir, que el fondo de nuestra página web sea un vídeo en vez de un color o una imagen de fondo. Veamos cómo podemos hacerlo.

Lo primero será poner el vídeo dentro de nuestra página. Para ello utilizaremos el elemento video

El elemento source nos va a ayudar a indicar el origen y tipo del vídeo. En este caso podemos utilizar cualquier formato que esté soportado por los navegadores.

Como lo que queremos es que el usuario no interactue con el vídeo para arrancarlo o pararlo, lo que vamos a hacer es arrancarlo automáticamente mediante la propiedad autoplay

Hasta ahora lo que hemos conseguido es poner el vídeo dentro de nuestra página. Ahora vamos a pasar a ponerlo de fondo. Para ello vamos a manipular el estilo CSS del elemento vídeo.

video { ... }

En cuanto a las propiedades lo que haremos será indicar que el mínimo ancho y mínimo alto sean el 100% de la página. Y que a la vez el alto y ancho sean automáticos.

video { 
   
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;

}

De momento hemos conseguido hacerlo más grande, pero solo en la parte de la página que no tiene contenido, y a nosotros nos interesa que ocupe todo. Así que lo que vamos a hacer es desplazar al vídeo hasta la esquina izquierda.

Para ello utilizo las propiedades top, left y transform:

video { 

  position: fixed;    
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);      

}

Vaya, ahora no veo el texto, el vídeo tapa toda la página. Lo que nos quedará es poner el vídeo en el eje de coordenadas Z lo más alejado posible. Así que manipulamos el valor z-index y le damos un valor negativo alto.

video { 
    
  z-index: -100;    

}

También es bueno trabajar con la propiedad background-size y darle el valor de «cover» para que el vídeo ocupe todo el background.

Finalmente nuestro código de estilo del vídeo quedaría así:

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;

}

Ya habremos conseguido tener un vídeo como background en HTML5.

Código Fuente

Descárgate el código fuente de Vídeo como background en HTML5
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
4 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios