Pon un vídeo de fondo en tu página para molar

Jesús Martín Jiménez

hace 11 años

Las modas en Internet son un ciclón y de vez en cuando aparece un nuevo recurso que cambia el diseño web de los próximos años. Si primero hubo que meter backgrounds con imágenes «width:100%», hoy en día, si quieres hacer una web que mole, no se te puede olvidar meter un vídeo de fondo que:

Se reproduce automáticamente.
No tiene sonido.
Ligeramente oscuro, para que contraste con las letras blancas que pones encima con frases aspiracionales.
Con botones de esos que solo son un borde blanco y que en hover hacen de todo.
Con un buscador bien gordo en el centro con el botón a color chillón.

Si lo que buscabas era saber cómo se hace técnicamente en este post te lo cuentan en inglés: http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

Y si vas justo en lo que viene siendo desarrollo, puedes descargarte algún tema de WordPress que lo incluya entre sus funcionalidades. Echa un ojo por AQUÍ

Ventajas de usarlo

Si te das prisa igual consigues ser uno de los 100 primeros que lo haces y sales en alguna review, en thefwa, o en awwwards.
Durante un tiempo a los usuarios les flipará tu página y se quedaran embobados viendo los sugerentes vídeos que van pasando.
Si el recurso ayuda a contar el mensaje estarás haciendo un buen uso de él.

Problemas que te puedes encontrar

Se hace con HTML5 y hay exploradores en los que no funciona. Pobre Explorer y pobres móviles. Aunque siempre queda la solución Graceful degradation con la imagen estática de sustitución.
Puedes despistar al usuario, afectando a la conversión y al user experience, cuando parece que está claro que lo que quieres es que interactúen con el buscador gordo del centro. Sobre ello hay una interesante discusión que puedes leer en esta entrada de Quora
Hay que hilar fino para que no se afecten los tiempos de carga de la página. Airbnb lo soluciona cargando un primer fotograma hasta que el resto del vídeo comienza a reproducirse.

Mi visión de futuro

Seguramente su evolución no será diferente a la que ya hemos visto a lo largo de la historia del diseño en internet, siguiendo los mismos pasos que las intros en flash, las páginas hechas enteras en parallax, los mega-menus, el menú hamburguesa (con el que ya me metí en este post), etc. Más o menos funciona siempre así:

Los primeros que lo hacen molan y se pueden permitir los problemas que se pueda derivar del uso del recurso.
Todos los diseñadores quieren hacer algo así en cuanto lo ven y la bola crece.
Poco después, los diseñadores empiezan a criticar el abuso del recurso y se plantean su utilidad real.
Los marketers lo ven meses después de que se convierta en tendencia y lo quieren en sus páginas.
Los primeros en usarlo puede ser que testeen la solución, los siguientes solo se suman al carro de la molonidad y no hacen ni un solo test de usuario.
Las modas se alargan durante años y cada vez el recurso es menos llamativo y menos útil y al final solo quedan los problemas derivados del uso.