≡En resumen
- Un vídeo de fondo es decorativo: el mensaje principal debe entenderse sin él.
- Para que se reproduzca solo en todos los navegadores debe estar silenciado y, en iPhone, llevar playsinline.
- El póster y el peso del archivo deciden cuánto penaliza el vídeo a la velocidad de carga.
- WCAG 2.2.2 obliga a ofrecer un control de pausa si el movimiento dura más de 5 segundos.
- En móvil, valora sustituirlo por una imagen o por una versión mucho más ligera.
01 ¿Qué es un video background?
Técnicamente, CSS no permite usar un vídeo como background-image. El efecto se consigue con una etiqueta <video> posicionada detrás del contenido y ajustada con object-fit: cover para llenar el espacio sin deformarse. Se popularizó en las cabeceras a pantalla completa, lo que en diseño se conoce como la zona above the fold, justo la parte de la web que más influye en la primera impresión y en la velocidad percibida.
02 Cómo poner un vídeo de fondo en una web
-
1
Prepara un clip corto
Entre 8 y 20 segundos, sin cortes bruscos, que funcione en bucle y sin pista de audio.
-
2
Exporta versiones ligeras
MP4 (H.264) por compatibilidad y, si puedes, WebM o AV1 para navegadores modernos, a la resolución justa.
-
3
Crea el póster
Una imagen optimizada del primer fotograma que se muestra mientras carga el vídeo o si no se reproduce.
-
4
Inserta la etiqueta vídeo
Con los atributos autoplay, muted, loop, playsinline y poster, y las fuentes en orden de preferencia.
-
5
Colócalo detrás del contenido
Posición absoluta, object-fit: cover y una capa semitransparente que garantice el contraste del texto.
-
6
Añade el botón de pausa
Visible, accesible con teclado y con una etiqueta clara, por ejemplo «Pausar vídeo de fondo».
<video autoplay muted loop playsinline poster="cabecera.webp"><source src="cabecera.webm" type="video/webm"><source src="cabecera.mp4" type="video/mp4"></video>
El atributo muted es imprescindible: Chrome permite siempre el autoplay silenciado, y en iPhone los vídeos silenciados pueden empezar solos desde iOS 10. playsinline evita que el iPhone abra el vídeo a pantalla completa. Aun así, ningún navegador garantiza el autoplay (por ejemplo, con el modo de ahorro de energía), así que el póster debe funcionar por sí solo.
03 Video background y velocidad de carga
Un vídeo de fondo en la cabecera suele ser el elemento más grande de la pantalla, así que entra en el cálculo del LCP (Largest Contentful Paint), la métrica de carga de las Core Web Vitals. Según web.dev, en un <video> cuenta el tiempo de carga del póster o la presentación del primer fotograma, lo que ocurra antes. El objetivo es un LCP de 2,5 segundos o menos en el percentil 75 de las visitas. Tienes el contexto completo en la entrada sobre optimización de velocidad.
- ✓Usa siempre un póster ligero (WebP o AVIF) con las mismas dimensiones que el vídeo.
- ✓Elimina la pista de audio: no se va a oír y añade peso.
- ✓Ajusta la resolución al tamaño real en pantalla; 4K en una cabecera casi nunca compensa.
- ✓Mantén el clip corto: el bucle disimula la duración.
- ✓Sirve una versión más ligera en móvil o sustitúyela por la imagen del póster.
- ✓Si el vídeo está más abajo en la página, cárgalo solo cuando vaya a entrar en pantalla.
- ✓Aloja el vídeo en un CDN o en tu propio servidor con caché, no en un reproductor de terceros con su propio script.
Si tu web ya va lenta, un vídeo de fondo solo lo empeorará: antes conviene medir y trabajar la velocidad de carga web en su conjunto.
04 Accesibilidad: el control de pausa (WCAG 2.2.2)
“Para cualquier información en movimiento, parpadeo o desplazamiento que empiece automáticamente, dure más de cinco segundos y se presente junto a otro contenido, existe un mecanismo para que el usuario la pause, la detenga o la oculte, salvo que el movimiento sea esencial.”
| Requisito | Qué implica | Cómo cumplirlo |
|---|---|---|
| WCAG 2.2.2 Pausar, detener, ocultar (A) | El movimiento automático de más de 5 s debe poder pararse | Botón de pausa visible y accesible con teclado |
| WCAG 1.4.3 Contraste mínimo (AA) | Texto legible sobre el fondo | Capa oscura o clara sobre el vídeo; contraste de al menos 4,5:1 en el texto normal |
| WCAG 2.3.1 Tres destellos (A) | Nada que destelle más de tres veces por segundo | Evita cortes rápidos y luces intermitentes |
| Preferencia de movimiento reducido | Hay usuarios que configuran su sistema para reducir animaciones | Con la media query prefers-reduced-motion, muestra el póster en lugar del vídeo |
La W3C eligió los cinco segundos porque es tiempo suficiente para captar la atención, pero no tanto como para que el usuario no pueda esperar a que termine la distracción. Un vídeo de fondo en bucle nunca termina, así que necesita el control. Desde el 28 de junio de 2025, además, la Ley Europea de Accesibilidad obliga a muchos comercios electrónicos y servicios digitales; lo explicamos en la guía sobre accesibilidad web y la EAA.
05 Ventajas e inconvenientes de un vídeo de fondo
| Ventajas | Inconvenientes |
|---|---|
| Transmite ambiente, lugar o proceso en segundos | Más peso de página y posible peor LCP |
| Refuerza la identidad visual de la marca | Distrae si compite con el titular y el botón principal |
| Diferencia la web de plantillas con foto de stock | Consume datos en móvil y batería |
| Muestra un producto o servicio en acción | Exige control de pausa y buen contraste para ser accesible |
06 Alternativas al vídeo de fondo
Imagen fija de calidad
Una buena fotografía optimizada carga más rápido y transmite casi lo mismo.
Vídeo al hacer clic
Póster con botón de reproducir: el usuario decide y puede tener sonido.
Animación CSS o SVG
Movimiento sutil en formas, degradados o ilustraciones con muy poco peso.
Vídeo en lugar de GIF
Si necesitas un loop, un MP4 silenciado pesa mucho menos que un GIF animado equivalente.
Decidir entre vídeo, imagen o animación forma parte del diseño web profesional: la cabecera tiene que cargar rápido, decir qué ofreces y llevar al usuario a la acción. Si necesitas material, en nuestra lista de bancos de vídeos gratis en HD y 4K encontrarás clips con licencia para usar de fondo.
Preguntas frecuentes sobre Video Background
Es un vídeo que se reproduce automáticamente, sin sonido y en bucle detrás del contenido de una sección web, normalmente en la cabecera, como fondo en movimiento.
Normalmente porque no está silenciado o le falta playsinline. Los navegadores solo permiten el autoplay de vídeos silenciados, y el modo de ahorro de energía puede bloquearlo igualmente.
Puede hacerlo. Cuenta para el LCP a través del póster o del primer fotograma, así que conviene un póster ligero, un clip corto sin audio y una versión reducida para móvil.
Lo menos posible. Un clip corto, sin audio, a la resolución que realmente se muestra y comprimido en MP4 y WebM suele quedar en pocos megas.
Para cumplir WCAG 2.2.2 (nivel A), sí: si el movimiento empieza solo y dura más de 5 segundos, el usuario debe poder pausarlo, detenerlo u ocultarlo.
Se puede, pero no es recomendable: el reproductor incrustado añade scripts y peso. Es mejor alojar un MP4 o WebM propio.
Indirectamente, a través de la velocidad y la experiencia de usuario. Si empeora el LCP o tapa el mensaje principal, puede perjudicar; bien optimizado, el impacto es pequeño.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗