Una de las formas más modernas de hacer atractivo tu sitio web es agregar un video de fondo en HTML. Los videos pueden hacer que la visualización de una página sea mucho más emocionante y tienen la capacidad de captar la atención del usuario desde el primer momento. Ya en otro artículo te habíamos enseñado cómo agregar un video en HTML y cómo poner un video en HTML con la etiqueta <video>, por eso, en el artículo de hoy te enseñaremos las diferentes formas de poner un video de fondo en HTML.
Cómo poner un video de fondo en HTML
Para poner un video de fondo en HTML debemos seguir una serie de pasos. Veamos cuáles son:
Preparación del video
El primer paso es acceder al video que vas a usar. Tienes que estar seguro de que el video está en los formatos más comunes y compatibles, como MP4, OGG y WebM, así, se podrá reproducir en la mayoría de los navegadores.
Código básico en HTML
El segundo paso es escribir el código necesario para poner el video de fondo en HTML. Para esto debemos usar la etiqueta <video>. Veamos cómo hacerlo:
<video autoplay loop muted id="video_background">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Tu navegador no soporta el formato de video.
</video>Atributos clave para el video de fondo
El tercer paso es verificar que los atributos clave para poner el video de fondo en HTML se cumplan. Los atributos más relevantes son:
autoplay: para que el video se reproduzca automáticamente cuando se carga la página.loop: para que el video se repita en un bucle continuo.muted: para silenciar el audio del video (esto es crucial para evitar molestias al usuario).id="video_background": un identificador que nos permitirá aplicar estilos CSS al video.
Como pudiste observar, la mayoría de estos atributos son los que se usan en cualquier reproductor de música estándar, como Spotify o YouTube.
Estilizar el video con CSS
El cuarto paso corresponde a usar CSS para estar seguros de que el video cubra toda la pantalla y se mantenga en el fondo, sin posibilidad de interferir con otros elementos de la página:
#video_background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background-size: cover;
overflow: hidden;
}Este código CSS hace que el video ocupe toda la pantalla, independientemente del tamaño de la ventana del navegador, y lo posiciona detrás de cualquier otro contenido.
Añadir una capa de color o patrón sobre el video
Si deseas que el video de fondo no se vea tan fuerte, que sea más sutil y/o si requieres que el texto sobre el mismo sea más legible, siempre puedes una capa de color semitransparente o, en su defecto, un patrón encima del video. Veamos cómo:
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Capa negra con 50% de opacidad */
z-index: 0;
}Este overlay se coloca sobre el video, creando un efecto visual que puede hacer que tu contenido sea más legible sin ocultar completamente el video de fondo.
Ejemplo de video de fondo en HTML
Ya hemos visto el paso a paso de cómo agregar un video de fondo en HTML. Veamos un ejemplo completo, en caso de que quieras ensayar e implementarlo en tu web:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Video de Fondo en HTML</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#video_background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
font-size: 2em;
padding: 50px;
}
</style>
</head>
<body>
<video autoplay loop muted id="video_background">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Tu navegador no soporta el formato de video.
</video>
<div id="overlay"></div>
<div class="content">
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un ejemplo de video de fondo en HTML.</p>
</div>
</body>
</html>En este ejemplo se ha implementado un video de fondo con una capa semitransparente y texto sobre él. Este es un diseño típico que puedes adaptar para cualquier proyecto.
Algunas consideraciones adicionales
- Formatos de video: Existen muchos navegadores que no soportan ciertos formatos de video, de ahí la importancia de asegurarte en incluir versiones MP4, OGG y WebM de los videos, lo que maximizará la compatibilidad con los navegadores. Así mismo, es importante optimizar el video para la web, de modo que se asegure un equilibrio entre la calidad y el tamaño del archivo.
- Rendimiento: Debes recordar que los videos tienden a afectar el rendimiento de tu web, en especial si es desde dispositivos móviles. Por lo tanto, considera agregar una imagen de fondo como fallback, para dispositivos que no tengan la capacidad de reproducir videos, o en caso de que el video no cargue.
Ahora que sabes cómo poner un video de fondo en HTML, podemos seguir aprendiendo sobre desarrollo web con el bootcamp de desarrollo web que Keepcoding tiene para ti. Con este curso aprenderás toda la fundamentación necesaria, tanto teórica como práctica, para incursionar en mercados laborales llenos de excelentes oportunidades. ¡No esperes más para darle un giro a tu vida e inscríbete ahora!
