# Web con vídeo de fondo: peso, reproducción automática y accesibilidad [Canonical HTML page](https://gradiently.design/es/guide/video-background-website) Una cabecera en movimiento puede hacer que una web se sienta viva, o volverla lenta, molesta y difícil de leer. La diferencia está en una lista corta de decisiones técnicas y de diseño. ## The short version - Un vídeo de fondo en una web es un vídeo mudo y en bucle que se reproduce detrás de una sección, normalmente la cabecera, mientras el texto y los botones quedan encima. - Los navegadores suelen permitir la reproducción automática de un vídeo solo cuando está silenciado, y los iPhone además necesitan el atributo playsinline para mantenerlo dentro de la página. - Una imagen de póster debe mostrarse antes de que cargue el vídeo y siempre que no pueda reproducirse, así que tiene que parecer un diseño terminado por sí sola. - Quienes piden movimiento reducido deben ver el póster fijo, y el contenido en movimiento que dura más de cinco segundos necesita una forma de pausarlo. - Los bucles cortos, lentos y sin sonido se comprimen mucho mejor que las imágenes cargadas de acción, y eso mantiene rápida la página. En una **web con vídeo de fondo**, un vídeo mudo y en bucle se reproduce detrás de una sección, casi siempre la cabecera, mientras el titular y los botones quedan encima. Bien hecho, es ligero, discreto y opcional: se reproduce solo y en silencio, muestra una imagen fija terminada antes de cargar, se pausa para quienes prefieren menos movimiento y nunca hace más difícil leer las palabras. Mal hecho, es lo más pesado y lo que más distrae de toda la página. ## Cuándo merece la pena un vídeo de fondo Un vídeo de fondo se gana su sitio cuando el movimiento es el mensaje: agua para una escuela de natación, vapor para un tostador de café, un material que flota despacio para una marca cuyo aspecto es su identidad. Si el movimiento es solo decoración, una opción más ligera suele quedar igual de bien. Compara las opciones antes de decidir. | Opción | Peso en la página | Ideal para | | --- | --- | --- | | Imagen fija | Ligero | Fotografía, y páginas donde la velocidad es lo que más importa | | Degradado CSS animado | Casi nada | Derivas sencillas y cambios de color | | Shader WebGL | Descarga ligera, usa la GPU | Texturas vivas, grano y flujo | | Vídeo | Pesado, salvo que sea corto y lento | Imágenes reales, o movimiento que debe verse exactamente igual en todas partes | El vídeo es la única opción para imágenes grabadas. Para movimiento abstracto, [CSS](https://gradiently.design/es/guide/css-animated-gradient) y los [shaders](https://gradiently.design/es/guide/shader-gradients) suelen ser más ligeros. ## El HTML de un vídeo de fondo Cuatro atributos hacen el trabajo esencial. `muted` permite que el navegador lo reproduzca automáticamente, ya que los navegadores suelen bloquear la reproducción automática con sonido. `playsinline` evita que un iPhone lo abra a pantalla completa. `loop` lo repite, y `poster` muestra una imagen fija mientras carga. Como es decorativo, ocúltalo a los lectores de pantalla. ```html

Colour that moves with you

``` El navegador usa la primera fuente que puede reproducir: WebM donde se admite, MP4 en todos los demás. ```css .hero { position: relative; min-height: 80vh; overflow: hidden; background: #120a2e; /* shows before the poster arrives */ } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* fills any shape without stretching */ } .hero-content { position: relative; /* sits above the video */ } ``` `object-fit: cover` recorta el vídeo a la forma de cualquier pantalla. Mantén lo importante de la grabación cerca del centro. La guía de MDN sobre el [elemento video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) enumera todos los atributos. Recuerda que la reproducción automática es una petición, no una garantía: algunos móviles en modo de ahorro de energía no la reproducen. Por eso el póster tiene que parecer un diseño terminado por sí solo. ## Cómo mantener ligero el archivo de vídeo El vídeo suele ser el archivo más pesado de cualquier página que lo tenga. Las imágenes suaves y lentas se comprimen mucho mejor que las nítidas y cargadas de acción, así que la decisión de diseño es también una decisión de rendimiento. Mantén el bucle corto, de unos 8 a 15 segundos, elimina por completo la pista de audio y no sirvas un tamaño mayor del que la cabecera llega a mostrar. Fíjate un presupuesto de peso antes de exportar y comprueba el resultado real en el panel de red de tu navegador. ```bash # MP4 (H.264): silent, web-ready, starts playing before it fully downloads ffmpeg -i hero-master.mov -an -c:v libx264 -crf 26 -preset slow \ -pix_fmt yuv420p -movflags +faststart -vf "scale=1920:-2" hero.mp4 # WebM (VP9): often smaller at similar quality ffmpeg -i hero-master.mov -an -c:v libvpx-vp9 -crf 36 -b:v 0 \ -vf "scale=1920:-2" hero.webm # Poster: the first frame as a JPEG ffmpeg -i hero.mp4 -frames:v 1 -q:v 3 hero-poster.jpg ``` Ajustes de partida. `-an` elimina el audio; un número CRF más alto significa un archivo más pequeño y más suave. Súbelo hasta que veas artefactos y luego retrocede. - Cabecera web 1920 × 1080: 1920 × 1080 - Recorte en móvil: 1080 × 1920 Crea el original a 1920 × 1080. En un móvil, `object-fit: cover` muestra solo una franja alta del centro, así que compón pensando en ello. > **Que el bucle empalme** Un salto visible cada diez segundos distrae más que no tener vídeo. Mira [cómo hacer un bucle perfecto](https://gradiently.design/es/guide/seamless-loop-video). ## Movimiento reducido y un botón de pausa Algunas personas configuran su dispositivo para reducir el movimiento porque les marea o les sienta mal. Respétalo mostrando el póster en lugar del vídeo. Aparte, el criterio [Pausar, detener, ocultar](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) de las WCAG pide que el contenido en movimiento que empieza solo y dura más de cinco segundos, junto a otro contenido, se pueda pausar. Un botón de pausa pequeño y visible lo cumple. ```js const video = document.querySelector('.hero-video') const button = document.querySelector('.hero-pause') const reduce = matchMedia('(prefers-reduced-motion: reduce)') function follow() { if (reduce.matches) video.pause() else video.play().catch(() => {}) // the browser may still refuse } reduce.addEventListener('change', follow) follow() button.addEventListener('click', () => { if (video.paused) { video.play() button.textContent = 'Pause background' } else { video.pause() button.textContent = 'Play background' } }) ``` Pausa con movimiento reducido, sigue el ajuste si cambia y da a todo el mundo un botón de pausa. [Movimiento reducido](https://gradiently.design/es/guide/reduced-motion) explica el ajuste y qué más conviene reducir. ## Texto legible sobre un vídeo de fondo El texto sobre un vídeo tiene que leerse en todos los fotogramas, no solo en el póster. El arreglo habitual es una capa oscura sobre todo el vídeo, que funciona pero lo aplana. Hay opciones mejores: elige imágenes tranquilas con una zona serena donde vayan las palabras, aleja del titular el movimiento más luminoso y usa un peso grande y grueso. Nuestra guía de [texto sobre imagen](https://gradiently.design/es/guide/text-over-image) tiene siete técnicas que sirven igual para el vídeo. Una cabecera web ancha con un titular sobre una textura en movimiento recargada que compite con las palabras Un material recargado que atraviesa el titular… La misma cabecera web con la textura calmada detrás del titular para que se lea con claridad …y la misma cabecera con la parte tranquila del campo detrás de las palabras. ## Lista de comprobación del vídeo de fondo 1. **Decide si de verdad necesita ser vídeo** Imágenes grabadas, o movimiento que debe verse idéntico en todas partes. Si no, plantéate CSS o un shader. 2. **Que sea corto, lento y mudo** De 8 a 15 segundos, sin pista de audio, con un bucle que empalme. 3. **Exporta dos formatos y un póster** WebM y MP4, sin superar el tamaño al que se muestra, más un primer fotograma fijo. 4. **Usa los cuatro atributos** `autoplay`, `muted`, `loop`, `playsinline`, con `poster` y `aria-hidden`. 5. **Respeta las preferencias de movimiento** Muestra el póster con movimiento reducido y añade un botón de pausa. 6. **Pruébalo en un móvil real** Comprueba el tiempo de carga con datos móviles, el modo de ahorro de energía y el recorte vertical. Para el diseño de la propia cabecera, mira [fondos para la cabecera de una web](https://gradiently.design/es/guide/website-hero-background). Si tu fondo en movimiento es un Mark de Gradiently, puedes exportarlo como un vídeo MP4 en bucle de hasta 1080p para usarlo exactamente así. ## FAQ ### ¿Por qué mi vídeo de fondo no se reproduce solo? Los navegadores suelen bloquear la reproducción automática con sonido, así que añade el atributo muted. En iPhone añade también playsinline, y recuerda que los modos de ahorro de energía pueden seguir impidiéndola, así que un buen póster importa. ### ¿Un vídeo de fondo ralentiza una web? Puede, porque el vídeo suele ser el archivo más pesado de la página. Los bucles cortos, lentos y sin sonido al tamaño adecuado, en WebM y MP4, mantienen bajo el coste. ### ¿Qué tamaño debe tener un vídeo de fondo para una web? Crea el original a 1920 × 1080 y no lo sirvas más grande de lo que se muestra. Las imágenes suaves y abstractas suelen verse bien a menor resolución. ### ¿Los vídeos de fondo tienen que ser accesibles? Sí. Oculta el vídeo decorativo a los lectores de pantalla, muestra una imagen fija a quienes piden movimiento reducido y ofrece un control de pausa para el movimiento que dure más de cinco segundos. ### ¿Qué alternativa más ligera hay a un vídeo de fondo? Un degradado CSS animado o un shader WebGL pueden crear movimiento abstracto con una descarga mucho menor, aunque los shaders usan el chip gráfico mientras funcionan.