Video de fondo de página web

Video de fondo de página web

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.

inusual.com

Fuentes: ]]>

5 Comments


Francisco Jofre
28/03/2015 at 16:14
Reply

Agradezco mucho la información. Actualmente estoy trabajando con video en un sitio web y tengo una consulta que ojalá me puedas ayudar.
Necesito que al terminar el vídeo se dirija automáticamente a otra url. ¿Cómo se hace esto con script.?
Gracias de antemano


    Javier Alcocer
    29/06/2016 at 00:24
    Reply

    Que tal Francisco, aun no me ha tocado crear una web con vídeo como background pero podrías intentar crear un contador automático con JQuery que tenga como límite de tiempo el tiempo de tu vídeo y que al finalizar el conteo te haga la redirección a donde tu decidas. El contador iniciaría al cargar la página, te sugiero que le des unos dos segundos de margen por la carga de la página.
    Así lo haría yo.
    Saludos

Gerson Rodríguez
02/03/2016 at 18:24
Reply

Muchas gracias por la información , aunque en dispositivos móviles el resultado no es el mejor, yo opte por utilizar vidbg y agregar en poster un gif, para que este se vea en dispositivos que no carguen el video, espero a alguien le sirva esto.


Nelson Naveda
08/04/2016 at 00:50
Reply

COn respecto al formato del video, caracteristicas, dimensiones entre otros. cuales deberian ser?


Leave A Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Déjate sorprender...