📘 Módulo 20: CSS Avanzado – Integración multimedia

Aprender a usar videos como fondos de secciones web. Aplicar efectos visuales con CSS sobre contenido audiovisual.

Objetivos

  • Aprender a usar videos como fondos de secciones web.
  • Aplicar efectos visuales con CSS sobre contenido audiovisual.
  • Integrar audio y video en interfaces de manera elegante.
  • Mantener rendimiento y accesibilidad al trabajar con multimedia.

🔹 1. Video como background

html

<div class="video-fondo">
  <video autoplay muted loop>
    <source src="video.mp4" type="video/mp4">
  </video>
  <div class="contenido">
    <h1>Bienvenido</h1>
  </div>
</div>

css

.video-fondo {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-fondo video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

👉 El video se reproduce en segundo plano mientras el contenido permanece encima.

🔹 2. Filtros sobre video

css

video {
  filter: brightness(70%) blur(2px);
}

👉 Oscurece y suaviza el video para que el texto sea más legible.

🔹 3. Overlay con degradado

css

.video-fondo::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
}

👉 Añade un degradado encima del video para mejorar contraste.

🔹 4. Animaciones sincronizadas

Puedes combinar animaciones CSS con el video para reforzar la narrativa:

  • Texto que aparece con fade-in mientras el video corre.
  • Botones que pulsan suavemente sobre el fondo animado.

🔹 5. Buenas prácticas

  • Usa videos cortos y optimizados para no afectar rendimiento.
  • Siempre incluye atributos muted y autoplay para compatibilidad.
  • Añade un fallback estático (imagen) para navegadores que no soporten video.
  • Respeta accesibilidad: evita videos demasiado rápidos o con flashes intensos.

📝 Actividad práctica

  1. Implementa un video background en el header de tu página.
  2. Añade un overlay con degradado para mejorar la legibilidad del texto.
  3. Aplica un filtro CSS al video para oscurecerlo y resaltar el contenido.
Visitas:13