Para usar un fondo de video, tenemos que usar el elemento HTML 5
Los videos son cada vez más comunes en los sitios web de hoy en día y son una excelente manera de crear un sitio web moderno. Con solo un poco de CSS, puede agregar un fondo de video a su sitio en cuestión de minutos. Sin embargo, tenga en cuenta que esta técnica solo funciona para elementos
Encontrar un video de fondo
Si aún no tiene un video, la forma más fácil de encontrar videos para su sitio es usar galerías de videos como pixabay o pexel.
Una vez que encuentre el que desea usar, deberá descargarlo y cargarlo en su servidor (o servicios CDN como nublado).
Una vez subido, tenemos la URL del video y podemos usarlo en nuestro elemento
Agregar el HTML para el video
Para el video usaremos el Elemento de vídeo HTML 5. Espera al menos un archivo fuente de video y se puede configurar pasando múltiples atributos HTML.
Para nuestro ejemplo, usaremos esto:
<video playsinline autoplay muted loop poster="cake.jpg">
<source src="my-video-url.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Hablaremos más adelante más sobre el configuración de vídeo de fondo y el formatos de video.
Colocar el video en segundo plano con CSS
Por lo general, en CSS configuramos la imagen de fondo usando la propiedad de fondo o la de imagen de fondo.
background: url(imgs/my-background-image.png);
background-size: cover;
sin embargo, el propiedad de fondo solo funciona para imágenes y colores. No con vídeos.
Ahora que tenemos un elemento de video estándar, entonces, ¿cómo lo convertimos en un fondo? Usaremos un pequeño truco aquí. Usando la posición CSS: absoluta simularemos un elemento de fondo.
video {
position: absolute;
top: 0;
left: 0;
}Esto colocará nuestro video fuera del flujo normal del documento y en relación con el elemento que elegimos dentro de sus padres.
Entonces, ¡es hora de agregar nuestro contenedor de video! Usaremos un elemento div como contenedor para nuestro video. Lo llamamos video-envoltorio.
<div class="video-wrapper">
<video playsinline autoplay muted loop poster="cake.jpg">
<source src="my-css-video-background.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
Y aquí es donde ocurre la magia:
.video-wrapper {
position: relative;width: 400px;
height: 200px;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
Agregué comentarios en el código CSS para que puedas ver para qué sirve cada una de las propiedades.
Hacer que el video de fondo cubra todo el contenedor
Es común que los fondos cubran todo el contenedor. Usualmente hacemos esto con CSS usando el estilo background-size: cover directamente en la imagen de fondo. Pero debido a que en este caso, nuestro video no es en realidad un fondo CSS, usaremos otro pequeño truco al usar object-fit: cover junto con height: 100% y width: 100% en nuestro elemento de video.
video {
object-fit: cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Para ilustrar esto mejor, aquí hay un ejemplo de un fondo de video que no cubre todo el contenedor:
Y aquí está el mismo video de fondo que cubre todo el contenedor:
Agregar elementos encima del fondo del video
En este momento, no hay nada especial que debamos hacer para agregar contenido encima de nuestro video. Y eso se debe a que agregamos la propiedad posición: relativa al contenedor de video al configurar el video como fondo (que tiene una posición absoluta).
Todo lo que agregue después del elemento de video se colocará encima de él.
<div class="video-wrapper">
<video playsinline autoplay muted loop poster="cake.jpg">
<source src="my-css-video-background.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="header">
<h1>Blueberry Cheesecake</h1>
<button>Recipe here</button>
</div>
</div>
Aquí está el resultado final:
Configurando el vídeo
Si se dio cuenta, en nuestro código HTML hemos agregado bastantes cosas en el elemento de video. Los más importantes son loop, muted y autoplay.
<video playsinline autoplay muted loop poster="cake.jpg">
<source src="my-css-video-background.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Los videos no podrán reproducirse automáticamente a menos que los silenciamos primero. Y si está utilizando un fondo de video, usar la opción de bucle también es bastante común, por lo que el video se reproducirá sin cesar.
El póster es la imagen que queremos mostrar mientras el video aún se carga y aún no puede reproducirse automáticamente.
Formatos de vídeo y compatibilidad con navegadores
El Elemento de vídeo HTML 5 permite el uso de múltiples archivos fuente. Esto significa que podemos proporcionar nuestro video en diferentes formatos para compatibilidad con el navegador.
<video playsinline autoplay muted loop poster="my-static-image.jpg">
<source src="my-video-url.webm" type="video/webm">
<source src="my-video-url.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
En este ejemplo, primero intentamos cargar el video webm, y si el navegador no puede reproducirlo, volverá a la versión mp4.
No todos los navegadores pueden reproducir todo tipo de formatos de video, consulte la tabla de compatibilidad para cada formato de video.
El formato mp4 es ampliamente aceptado por la mayoría de los navegadores modernos, pero el uso de alternativas como webm también puede ser útil para ahorrar ancho de banda. Entonces, agregar ambos puede ser una buena combinación.
Si te preguntas cómo convertir de un formato a otro, puedes usar cualquiera de los convertidores en línea. Simplemente busque en Google “mp4 a webm” o “webm a mp4” y encontrará muchos convertidores en línea.
Conclusión
No hay excusa para usar videos hoy en día. Los videos en los sitios web son una herramienta de diseño muy poderosa que puede darle a su sitio web un aspecto moderno. Son fáciles de implementar, más ligeras que las animaciones GIF y de alta calidad.
Como puede ver, solo necesita unas pocas líneas de CSS para configurar cualquier video como fondo. Y, si quiere ir un paso más allá, puede usar la pantalla completa usando componentes como fullPage.js. Mira el video de ejemplo aquí.
Su navegador no soporta la etiqueta de vídeo.
Artículos relacionados
