logoCoderhouse.png
Ë
By Lucas Gallucci • January 19, 2016

Insertar video como fondo de un sitio web

¡Hola! Mi nombre es Lucas Gallucci, profesor en Coderhouse, y hoy vamos a aprender a insertar un video como fondo de un sitio web de forma muy sencilla.

CSS aún no permite entre sus posibilidades insertar un video como fondo. La propiedad background nos permite utilizar colores, degradados, imágenes, etc. En esta guía vamos a ver paso a paso cómo implementar un video de fondo en nuestro sitio con HTML5.

Factores importantes

Antes de tomar la decisión de incluir en tu sitio web un video, es importante que tengas en cuenta estos aspectos:

  • Los videos pueden llegar a ser bastante pesados y provocar que nuestro sitio web se vuelva realmente lento. Por lo tanto, será necesario optimizar nuestro video antes de usarlo.
  • Es recomendable que no tenga sonido, ya que podría resultar demasiado invasivo para nuestros usuarios (y ni hablar de un poco pasado de moda).
  • Pondremos una imagen como alternativa en caso que nuestro video no cargue correctamente.
  • Para lograr una buena experiencia de usuario, no pondremos videos demasiado largos y utilizaremos videos de no más de 30 segundos en loop.

¿Listo para cargar ese video?

Para empezar construimos una etiqueta de video de HTML5 clásica.

<video autoplay loop id="header" poster="video/video.jpg">
     <source src="video.webm" type="video/webm"> 
     <source src="video.mp4" type="video/mp4">
</video>

Le etiqueta video nos permite agregar de manera sencilla un video a nuestro sitio, con el atributo loop lograremos que nuestro video tenga una reproducción continua, mientras que con autoplay nuestro video comenzará a correr de manera automática.

El atributo poster será el encargado de mostrar una imagen si por algún motivo nuestro video no se carga con éxito.

¡Ya tenemos nuestro video! Ahora sólo resta convertirlo en fondo.

#header {
position: relative;
width: 100%;
z-index: -1;
background: url(imagen-video.jpg) no-repeat;
background-size: cover;
}

La propiedad z-index nos permitirá manejar las capas en el eje z, dándole un valor negativo nos aseguramos que el video quede en último lugar sin tapar información de nuestro sitio.

Volvemos a indicar como fondo del video la imagen por default para aquellos navegadores que no sean capaz de resolver el atributo “poster” o el “tag video”.

[video width="1280" height="720" mp4="http://coderhouse.com/blog/wp-content/uploads/2016/01/Video-HTML.mp4"][/video]

¡Todo muy lindo! ¿Pero y en mobile?

Lamentablemente en mobile el atributo autoplay no es válido y la performance de un video como fondo no es del todo buena. Teniendo en cuenta la multiplicidad de equipos disponibles en el mercado, también sería muy complejo asegurarnos que funcione de manera correcta en todos los dispositivos.

La alternativa:

Ocultaremos el video de fondo y pondremos una imagen.
Luego podremos insertar el video con un reproductor tradicional para que el usuario lo reproduzca.

@media screen and (max-device-width: 900px) {
header {
background: url(back.jpg) #000 cover;
}
.video{
display: none;
}
}

Usar video como fondo tiene en resultado realmente atractivo pero consume recursos y ancho de banda, con lo que es necesario que evalúes la viabilidad de usarlo.

¡Queremos conocer sus casos de éxito! Manden sus links en la sección de comentarios