Cómo poner un vídeo de fondo en HTML
Una de las tendencias que estamos viendo en Desarrollo Web es insertar vídeos en páginas web como fondo. Como comentábamos 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. [banneroferta product=0] Tras registrar un dominio y obtener un alojamiento web, 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.
- 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.
Insertar un vídeo como fondo de una página web
Con la etiqueta de , 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='video.mp4' type='video/mp4; codecs='avc1,mp4a'' /> <source src='video.ogg' type='video/ogg; codecs='theora,vorbis'' /> <source src='video.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.
Además de insertar vídeos en web como fondo, 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.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.