blog
Html5 Opinión Video

Video de fondo de página web

El concepto de fondo de página web no es nuevo para nadie. De hecho la propiedad responsable por ello, hace tiempo que es estándar HTML y permite muchas variaciones y estilos. En el fondo de la página,  o etiqueta HTML, además de colores sólidos se puede añadir degradados, imágenes, o imágenes SVG por medio de background o background-image.

Pero lo que muchos quieren actualmente en su sitio web es la posibilidad de tener un video como "imagen" de fondo. Me parece que es ya una tendencia y con un poco de creatividad se pueden obtener resultados muy buenos. De momento no hay una etiqueta background-video para hacerlo. ¿Como tener entonces un video de fondo en una página web?

Una solución pasa por combinar HTML y algo de Javascript poniendo el video detrás de otros elementos de HTML. Este enfoque es tan sencillo que permite evitar utilizar gestores de contenido o plugins extra que te pueden cargar el sitio web. Pero para hacerlo hay que considerar algunos detalles:

  • Es necesario configurar el video a autoplay y sin sonido. Lo mejor es editar el video y quitarle el sonido de alguna forma. También es posible desarrollar un botón en JavaScript para anular el modo de silencio si el sonido es realmente importante.
  • Hay que tener un espacio reservado para una imagen que se pueda utilizar como imagen de fondo para navegadores que no soportan HTM5 y también para dispositivos móviles. Algunos dispositivos móviles no permiten la reproducción automática de vídeo HTML5 por motivos obvios, me parece.
  • Es importante tener en cuenta la accesibilidad y tener un botón de pausa de acceso fácil. Algunas personas tiene dificultades  en leer texto sobre imágenes en movimiento.
  • Utilizar media queries y matchMedia, para controlar qué versiones del video se visualizarán en pantallas de dimensiones diferentes.
  • Controlar el tamaño, duración y compresión del vídeo.

Como hacerlo:

Para el enfoque HTML5 Y CSS es tan sencillo como introducir el código en tu página web:
    

Fácil, ¿no? Usamos el primer frame del video como poster aprovechando el hecho de que el poster será substituido por el primer frame cuando cargue el vídeo.

Solamente los navegadores modernos reconocen los formatos de video, pero la mayoría reconoce la etiqueta video y es posible aplicar una imagen de fondo, ¿la del poster?, en CSS (background-image) para este elemento. Para los navegadores en que esto no es posible siempre se puede utilizar (una vez más) el JavaScript, crear un elemento y posteriormente aplicarle el estilo que se quiere.

En principio .webm y .mp4 seran compatibles con dichos navegadores, pero se pueden añadir otros formatos como .ogv, por ejemplo.

JavaScript

Aunque la alternativa de HML5 sea la más utilizada, también es posible utilizar alternativas en JavaScript o Jquery para obtener el mismo resultado:

Te dejo aquí el resultado del ejemplo.  Para tener el video como fondo de toda la página web, al ser HTML5 solo hay que aplicarle los estilos de CSS y variar algo en el HTML.

Video thumb

inusual.com

Fuentes:

pixi.js:renderizador 2D para WebGL

Artículo anterior

Material design

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

Los mejores software para gestión de proyectos

3 Herramientas DevOps

Maquetar en Drupal 7: Funciones del Tema

CodyHouse