Cómo insertar vídeos de fondo en nuestra página web


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

Una de las tendencias que estamos viendo este año en Desarrollo Web es la integración de vídeos en el fondo de una página web. Como comentábamos la semana pasada desde el punto de vista teórico, esto es posible especialmente gracias a la popularización del formato de vídeo WebM, que consigue incorporar esta funcionalidad  sin afectar a la usabilidad y experiencia de usuario. En este tutorial práctico, explicamos las diferentes formas de insertar un vídeo de fondo en nuestra página web, un recurso audiovisual muy atractivo actualmente.

Antes de empezar con la parte práctica, conviene que tengamos en cuenta, que como todo recurso de diseño, si abusamos o lo utilizamos de forma incorrecta, el efecto podría ser todo lo contrario a lo que buscamos: dotar nuestra página de un mayor impacto visual atractivo para nuestros visitantes. Utilizarlo en las landing pages de las campañas de Email Marketing podría ser una excelente opción. También hay una serie de recomendaciones que conviene seguir:

  • Utilizar vídeos sencillos, con altos contrastes.
  • Poner los vídeos en silencio por defecto.
  • El vídeo debe de estar optimizado para Internet. Es decir, sin tardar en cargar ni pixelarse.
  • Los formatos MP4 y WebM son las mejores opciones.

Utilidades para convertir vídeos

Seguro que tienes multitud de vídeos para convertir y estás considerando la posibilidad de incluir alguno como vídeo de fondo en tu pagina web. Por lo tanto, te mostramos algunas aplicaciones gratuitas que podrían resultar de gran utilidad, disponibles para distintos sistemas operativos.

  • Ffmpeg es una librería que se ejecuta como línea de comandos para convertir audio o vídeo de un formato a otro. Está disponible tanto para Linux, Windows y MacOs. Podéis descargarla en este enlace.
  • Handbrake es una aplicación de escritorio también muy interesante.
  • Los conversores online, como video.online-convert.com, pueden ser una muy buena opción para convertir y optimizar nuestros vídeos. Este servicio online nos permite incluso hacer conversiones en formato WebM (VP8).

Fuentes donde obtener vídeos

Tanto Shutterstock como Videohive son fuentes donde podéis conseguir vídeos profesionales, con un amplio catálogo en el que aparecen separados por categorías y tienen una relación calidad/precio muy buena.

Implementar un vídeo como fondo 

Con la etiqueta de <VIDEO> de HTML5, podemos insertar vídeos en nuestra página web, aunque tenemos que tener en cuenta que cada navegador requiere un formato diferente y por tanto, deberemos tener el vídeo convertido a los diferentes formatos para asegurarnos de que se pueda visualizar correctamente en todos ellos.

En cuanto a los vídeos, en este caso, la estructura HTML y las CSS serían de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
<style>
 #cabecera{
 width: 100%;
 height: 500px;
 }
 #video {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: auto;
 z-index: -10;
 visibility: visible;
 }
 h2{
 color:white;
 text-shadow: 4px 4px 4px #333;
 text-align: center;
 margin-top: 200px;
 }
 </style> 
</head>
<body>
<div id="cabecera">
 <!—El código del vídeo iría aquí-->
<h2>El texto lo podríamos poner en esta línea</h2>
</div>
<h4>El resto del texto de la Web podríamos escribirlo aquí</h4>
</body>
</html>

La etiqueta video podría quedar así:

<video id="video" loop autoplay preload muted>
<source src="/blogvideo.mp4" type='video/mp4; codecs="avc1,mp4a"' />
<source src="/blogvideo.ogg" type='video/ogg; codecs="theora,vorbis"' />
<source src="/blogvideo.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>

Por supuesto, tocando las CSS y los parámetros del vídeo, podremos variar diferentes aspectos como la posición que ocupará en la pantalla, si aparecerá con el sonido apagado o encendido o si se reproducirá en bucle.

Si estás buscando darle una mayor riqueza visual a tu página web, te puede resultar útil el artículo Cómo utilizar varias imágenes de fondo con CSS , donde nos centramos en exprimir el atributo background-image.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+