Cómo poner un video de fondo en tu web: en bucle, sin sonido y sin frenar la carga

• Un video solo puede empezar solo si está silenciado: Chrome, Safari y Firefox bloquean la reproducción automática con sonido.
• En el iPhone hace falta el atributo playsinline para que no se abra a pantalla completa.
• Si el usuario tiene activado el ahorro de datos o de batería, el navegador puede no reproducirlo automáticamente: pon siempre una imagen de respaldo (poster).

Para un fondo puramente decorativo, de pocos segundos y sin controles, lo más ligero es un archivo pequeño servido desde tu web. Comprímelo mucho: un clip de 5–10 segundos debería pesar menos de 2–3 MB.

<video autoplay muted loop playsinline preload="metadata" poster="fondo.jpg" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">
  <source src="fondo.webm" type="video/webm">
  <source src="fondo.mp4" type="video/mp4">
</video>

Si es un video que la gente va a ver (una presentación, un tráiler o una demo), alójalo en Dembed e insértalo con el iframe. Así no pesa en tu hosting, la calidad se adapta a la conexión y el visitante puede activar el sonido o ponerlo a pantalla completa.

Añade ?autoplay=1 al final de la dirección del embed para que empiece solo, en silencio. En Panel → Reproductor puedes activar el bucle y ocultar el título para que quede más limpio.

<iframe src="https://dembed.cc/embed/v_TU_ID?autoplay=1" title="Presentación" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>

• No pongas un video pesado como fondo de la portada en móviles: muestra la imagen y reproduce el video solo en pantallas grandes.
• Usa loading="lazy" en los iframes que estén más abajo de la primera pantalla.
• Reserva el espacio con aspect-ratio para que la página no salte al cargar (mejora tu Core Web Vitals).
• Ofrece una forma de pausarlo: es mejor para la accesibilidad y para quien tiene movimiento reducido activado.