Usted aterriza en un sitio web y lo primero que ve no es una imagen estática, sino un video vivo que llena toda la pantalla. Se ve costoso. Se ve profesional. Y, lo más importante, funciona en cualquier dispositivo, desde un teléfono hasta un monitor ultraancho, sin una sola barra negra.

Podría pensar que algo así requiere JavaScript, mediciones del viewport y matemáticas complejas. Yo también lo creía cuando abordé esta tarea por primera vez. Probé con calc(), unidades de viewport, incluso escribí un script de redimensionamiento. Funcionaba en Firefox, se rompía en Chrome y en Safari permanecía completamente mudo.

Entonces resultó que CSS tiene desde hace varios años una propiedad que hace exactamente lo que necesitamos, sin una sola línea de JS. Y hoy le mostraré cómo construir un fondo de video totalmente responsivo que se comporte como background-size: cover, pero para video en vivo.

💡 Resumen rápido:

• Configure el elemento de video con posicionamiento fijo que cubra todo el viewport
• Aplique object-fit cover: el video se ajusta automáticamente recortando el excedente y preservando el centro
• Para navegadores antiguos, mantenga un respaldo usando media queries y un «contenedor sobredimensionado»
• Envuelva todo en un contenedor, útil para superposiciones, botones y texto encima del video
• Adapte para móviles: fuente diferente, playsinline y una imagen de respaldo

Enfoque básico: posicionamiento fijo

Cualquier fondo de video comienza haciendo que el <video> ocupe toda el área de visualización. Esto se logra mediante position: fixed con desplazamientos a cero:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
}

El elemento se estira exactamente al ancho y alto del viewport. El problema surge de inmediato: el video casi siempre se graba en una proporción de 16:9, pero la pantalla del usuario podría ser cuadrada, ultraancha o vertical. El resultado son esas barras negras que arruinan todo el efecto.

Si ha trabajado con imágenes de fondo en CSS, sabe que background-size tiene un valor cover. Este obliga a la imagen a llenar el contenedor por completo, recortando el excedente y conservando las proporciones. Necesitamos exactamente el mismo comportamiento del video. Y existe.

Solución moderna: object-fit: cover

La propiedad object-fit se creó precisamente para esto. Determina cómo un elemento reemplazado (imagen o video) se ajusta dentro de su contenedor, y el valor cover funciona exactamente como background-size: cover:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  width: 100%;
8
  height: 100%;
9
  object-fit: cover;
10
}

El video se escala para llenar completamente el contenedor. Si las proporciones no coinciden, el navegador recorta el excedente de arriba y abajo (o de izquierda y derecha) y centra automáticamente el resultado. Sin barras negras.

A fecha de 2026, object-fit cuenta con el soporte del 96.39% de los navegadores a nivel global (datos de Can I Use). Chrome desde la versión 32, Firefox desde la 36, Safari desde la 10, Edge desde la 79. Internet Explorer 11 no lo soporta, pero su cuota de mercado se acerca a cero y su período de soporte ha finalizado.

Para la gran mayoría de los proyectos, estas tres líneas de CSS son suficientes. El fondo de video está listo.

Problemas de escala: qué sucede «bajo el capó»

Incluso si usa object-fit, es útil entender la mecánica. Son posibles dos escenarios:

Primera situación: el viewport es más ancho que el video (relación de aspecto de la pantalla mayor que 16:9). El video se estira a lo ancho para llenar toda el área disponible, pero su altura se vuelve mayor que la altura de la pantalla, por lo que el contenido se recorta de arriba y abajo. El área de recorte se centra automáticamente.

Segunda situación: el viewport es más estrecho (relación de aspecto menor que 16:9, por ejemplo, orientación vertical en una tableta). El video se estira en altura para llenar toda el área disponible, el ancho excede el viewport, el recorte ocurre a izquierda y derecha, y el centro se preserva.

object-fit: cover maneja ambos escenarios por sí solo. Pero si por alguna razón está trabajando sin esta propiedad, la siguiente sección es para usted.

Truco clásico con un «contenedor sobredimensionado»

Antes de que object-fit se convirtiera en estándar, los desarrolladores usaban una técnica ingeniosa. La idea: hacer el contenedor deliberadamente más grande que el video y que el viewport, y el navegador centrará el contenido automáticamente.

En la práctica, se ve así:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
  height: 100%;
7
}
8
 
9
@media (min-aspect-ratio: 16/9) {
10
  #myvid {
11
    height: 300%;
12
    top: -100%;
13
  }
14
}
15
 
16
@media (max-aspect-ratio: 16/9) {
17
  #myvid {
18
    width: 300%;
19
    left: -100%;
20
  }
21
}

Las media queries determinan qué eje tiene desbordamiento y establecen un tamaño que es múltiplo del viewport, con un desplazamiento negativo para el centrado. El video termina siendo muchas veces más grande que el área de visualización, y el navegador lo recorta y centra usando el mecanismo estándar para elementos reemplazados.

Hoy este código es más una red de seguridad para proyectos heredados. Pero si está manteniendo un sitio donde object-fit no está disponible por alguna razón, el truco funciona de manera fiable.

Código de producción: integrándolo todo

En un proyecto real, un fondo de video rara vez existe por sí solo. Encima de él hay un título, un botón, un formulario, una superposición para la legibilidad del texto. Por eso el video se envuelve en un contenedor que mantiene las dimensiones del viewport:

1
#SDStudio_VIDEO_BACKGROUND {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  overflow: hidden;
8
}
9
 
10
#SDStudio_VIDEO_BACKGROUND > video {
11
  position: absolute;
12
  top: 0;
13
  left: 0;
14
  width: 100%;
15
  height: 100%;
16
}
17
 
18
/* Fallback: if object-fit is not supported */
19
@media (min-aspect-ratio: 16/9) {
20
  #SDStudio_VIDEO_BACKGROUND > video {
21
    height: 300%;
22
    top: -100%;
23
  }
24
}
25
 
26
@media (max-aspect-ratio: 16/9) {
27
  #SDStudio_VIDEO_BACKGROUND > video {
28
    width: 300%;
29
    left: -100%;
30
  }
31
}
32
 
33
/* Override if object-fit is available */
34
@supports (object-fit: cover) {
35
  #SDStudio_VIDEO_BACKGROUND > video {
36
    top: 0;
37
    left: 0;
38
    width: 100%;
39
    height: 100%;
40
    object-fit: cover;
41
  }
42
}

La directiva @supports verifica el soporte de object-fit y sobrescribe las reglas de respaldo. Un navegador moderno obtiene la solución limpia de tres líneas. Uno anticuado funciona mediante media queries y el contenedor sobredimensionado.

El marcado es mínimo:

1
<div id="SDStudio_VIDEO_BACKGROUND">
2
  <video autoplay muted loop playsinline>
3
    <source type="video/mp4" src="myvid.mp4"
4
            media="(orientation: landscape)">
5
    <source type="video/webm" src="myvid.webm"
6
            media="(orientation: landscape)">
7
    <source type="video/mp4" src="myvid_square.mp4"
8
            media="(orientation: portrait)">
9
    <source type="video/webm" src="myvid_square.webm"
10
            media="(orientation: portrait)">
11
  </video>
12
</div>

Algunos detalles que es fácil pasar por alto. muted es obligatorio: los navegadores bloquean la reproducción automática con sonido. playsinline evita que iOS expanda el video a pantalla completa. No hace falta recordarle lo de loop: un fondo de video sin bucle parece un error. Además: proporcione una fuente cuadrada para orientación vertical mediante media="(orientation: portrait)". Un clip estándar de 16:9 en una pantalla vertical se recortará casi por completo y se convertirá en un parpadeo sin sentido.

⁉️🤔 Preguntas frecuentes

¿Es necesario usar específicamente <video> o puedo poner un video de YouTube como fondo?

Puede usar un iframe de YouTube como fondo, pero con salvedades. Pierde el control sobre el buffering, no puede eliminar elementos de la interfaz y los navegadores móviles a menudo bloquean la reproducción automática del iframe. Para fondos, un <video> autoalojado es siempre preferible. Si incrusta YouTube, añada los parámetros ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID.

¿Qué formato de video debo elegir para máxima compatibilidad?

La combinación de MP4 (H.264) + WebM (VP8/VP9) cubre todos los navegadores modernos. MP4 es el formato principal, WebM es para Chrome y Firefox (menor tamaño con la misma calidad). Resolución para fondos: Full HD es suficiente. Resoluciones más altas proporcionan ganancias de calidad imperceptibles en un fondo, mientras que el tamaño del archivo crece de forma cuadrática. Mantenga los videos en unos pocos megabytes para una carga rápida.

¿Qué debo mostrar a los usuarios mientras se carga el video?

Establezca poster en el <video>, ya sea un primer fotograma estático o una imagen especialmente preparada. Respaldo CSS: background-image en el contenedor, que object-fit no cubrirá (se sitúa en una capa inferior). Para usuarios móviles con conexiones lentas, es mejor no cargar el fondo de video en absoluto. Use la media query prefers-reduced-data y sustituya por una imagen estática.

¿Cómo hago que el texto sobre el video sea legible?

Añada una superposición semitransparente entre el video y el contenido: background: rgba(0, 0, 0, 0.4) en un pseudoelemento ::after del contenedor con position: absolute; inset: 0; z-index: 1. El contenido en sí recibe z-index: 2; position: relative. Elija el coeficiente de oscurecimiento según el video específico: material más claro necesita más, material más oscuro necesita menos.

¿Funciona esto en iOS y Android?

Sí, con salvedades. iOS requiere playsinline (de lo contrario, el video se abre en un reproductor a pantalla completa). En versiones de iOS Safari anteriores a la 10, object-fit no está soportado, por lo que entrará en acción el respaldo del código de producción anterior. Android Chrome funciona correctamente. En ambas plataformas, el video solo se inicia tras la primera interacción del usuario si muted no está configurado, por lo que muted es estrictamente obligatorio.

Qué usar en su proyecto: el veredicto breve

Si está construyendo un sitio web en 2026, use object-fit: cover. Tres líneas de CSS, nada de JavaScript, responsividad total desde el primer momento. El soporte de navegadores es casi universal y la cobertura solo crece cada mes.

Si tiene un proyecto heredado con soporte obligatorio para Edge antiguo (anterior a 79) o Firefox (anterior a 36), el código de producción de la sección anterior le ofrece ambos mundos: @supports habilita la solución moderna, mientras que las media queries cubren el resto.

Y recuerde: un fondo de video es la guinda del pastel. Si el clip pesa 20 megabytes y tarda ocho segundos en cargar, el usuario se habrá ido antes de ver su hermoso titular. Comprima, pruebe a velocidades de red móvil y proporcione siempre un respaldo estático.

Brindo por un gran fondo.