Cómo poner vídeo de fondo en una web y 9 ejemplos de buen uso

3_78_video-html5
Cada vez es más frecuente ver el empleo del vídeo como uno de los componentes del diseño de una página web. Vamos a explicar brevemente el motivo de este auge, la forma de poner un video (las dos formas de escribir el término están aceptadas por la RAE) de fondo en una web y una serie de ejemplos, como hemos hecho en otras ocasiones, que puedan servir de inspiración

Hay dos formas de ver un vídeo en una página web:

1. Por un lado, están los incrustados de YouTube que usamos, por ejemplo, como parte del contenido de un artículo.
2. La otra forma es emplear los vídeos como parte de nuestro diseño como un elemento más de la interfaz.

Es esta segunda opción la que nos ocupa en este post, ya que durante mucho tiempo ver un video en una web requería, además de una buena conexión a Internet, el plugin de Adobe Flash. Estas dos condiciones limitaban las posibilidades del diseñador web a la hora de utilizar este elemento.

Con la llegada de la etiqueta HTML5 video, el uso de codecs de terceros ha quedado por fin eliminado y, mientras los gigantes que dominan la Red se ponían de acuerdo con el codec a utilizar, nuestra conexión ha mejorado lo suficiente para poder decir que se ha simplificado bastante el uso del vídeo en el diseño web. A partir de la llegada de esta etiqueta, empiezan a aparecer numerosos ejemplos de su uso en la interfaz web que enriquecen y dan más dinamismo a una página.

Os pongo aquí la sintaxis que necesitáis para poner video de fondo en una web:

HTML
<video class=»fondocss» loop=»loop» autoplay=»autoplay» >
<source src=»video/tuvideo.mp4″ type=»video/mp4″>
</video>
CSS
.fondocss {
position: fixed;
top:0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 0
}

Vamos a ver 10 ejemplos de vídeo en web que me han parecido interesantes.

1. EAGLE CLEAN

eagleclean

El video de fondo es un spot publicitario en sí mismo.

2. LUCAS HIRATA

lucashirata

Si eres un realizador, nada mejor que poner una mini reel de fondo.

3. BKWLD

bkwld

BKWLD nos proponen sustituir el manido slide de portada por vídeo.

4. WEYLAND INDUSTRIES

weylanindustries

La empresa que está detrás de los viajes espaciales de Alien tiene su propia web con un fondo decorativo hecho a medida.

5. RED REP

redrep

Productora audiovisual que muestra extractos de sus últimos trabajos en el fondo de su web.

6. CONTROL FILMS

 

controlfilms

Esta web aglutina el portfolio de un grupo de realizadores de nivel y usa el vídeo de forma muy intuitiva para la navegación.

7. THE UPRISING CREATIVE

Otra posibilidad es generar tu propio motion para la portada de tu página.

 

8. SWITZERLANDINC

switzerlandinc

 

9. SQUARESPACE

squearespace

El gigante de los frameworks de pago siempre usa video para el pliego principal de su home.

 

 

1 comentario en “Cómo poner vídeo de fondo en una web y 9 ejemplos de buen uso”

Dinos lo que piensas

Tu email no se mostrará ;)