Vídeo sin pelearse con el navegador

El vídeo de fondo es uno de los recursos que más promete y peor envejece. Cuando funciona, ancla el tono del sitio en cinco segundos. Cuando falla, deja un agujero negro encima del hero y un Lighthouse en rojo.

Lo mínimo que tiene que pasar

1. Compresión seria. AV1 o HEVC para los navegadores que lo soporten, H.264 alto perfil como fallback. Un hero de 1080p decente debería pesar bajo los 800 KB para diez segundos.
2. poster real. Un frame representativo, no la primera milésima del archivo. Mismo aspecto, JPG progresivo a ~80 % de calidad.
3. Atributos correctos. muted playsinline autoplay loop preload="metadata". Sin muted, Safari no autoplay; sin playsinline, iOS abre el reproductor a pantalla completa.

Lo que distingue una pieza buena

• Loop diseñado. El primer y último fotograma tienen que casar para que el bucle no salte. Si no, mete un fundido de un segundo en el editor.
• Pausa cuando no se ve. Si el hero ya no está en pantalla, pausa con IntersectionObserver. CPU y batería lo agradecen.
• Respeto al consentimiento. Si el vídeo se sirve desde Vimeo o YouTube, no lo cargues hasta tener consentimiento de medios. Hasta entonces, muestra el poster y un botón explícito.
• Reducción de movimiento. prefers-reduced-motion: reduce debería sustituir el vídeo por el poster sin debate.

Cuándo no usar vídeo

Si el contenido del proyecto no tiene movimiento real (foto fija, arquitectura estática, tipografía), un buen poster suele contar más. El vídeo no es la decoración: es el contenido cuando importa.