Cómo hacer un video responsive de Vimeo con fondo a pantalla completa

Usar un video de Vimeo como fondo puede darle vida a cualquier sección de un sitio web. Sin embargo, lograr que el video se adapte a cualquier tamaño de pantalla y mantenga la proporción correcta puede ser un reto.

En este post te muestro cómo hacerlo de forma simple con HTML y CSS.

Estructura HTML

Comenzamos con un contenedor que envuelve el iframe de Vimeo y el contenido que queramos superponer, como un título o un botón:

<div class="video-container">
  <iframe src="https://player.vimeo.com/video/1053811933?badge=0&amp;autoplay=1&amp;background=1&amp;controls=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
  <script src="https://player.vimeo.com/api/player.js"></script>
  <h1>Banner Video<h1>
</div>

Banner Video

En este ejemplo, se usan los parámetros de Vimeo:

• autoplay=1: para reproducir automáticamente.
• background=1: oculta los controles del reproductor y lo prepara para uso de fondo.
• controls=0: desactiva los controles visibles.
• badge=0: elimina el logo de Vimeo en la esquina.

Estilos CSS

Aquí viene la parte importante: hacer que el video cubra toda la pantalla y se mantenga centrado sin distorsionarse.

.video-container {
  position: absolute;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1;
}

.video-container iframe {
  pointer-events: none;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.77vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Explicación clave:

• pointer-events: none; → evita que el video bloquee la interacción con los elementos encima (como texto o botones).
• width: 100vw y height: 56.25vw → garantizan la proporción 16:9 del video.
• min-height y min-width → hacen que el video siempre cubra el viewport, tanto en pantallas verticales como horizontales.
• transform: translate(-50%, -50%) → centra el video perfectamente.

Un video de fondo fluido, responsive y sin barras negras, que mantiene su proporción y deja espacio para texto o contenido superpuesto.