Un vídeo de fondo web no es un master cinematográfico. Es una capa visual corta y silenciosa que debe empezar pronto, repetir con limpieza y dejar ancho de banda al contenido. Subir el original suele añadir resolución, bitrate, audio y metadatos innecesarios.
Prepara una copia específica para entrega y conserva la fuente fuera de Medios.
Definir la necesidad visual
Registra mayores dimensiones renderizadas, recorte y duración. Un archivo 4K cuesta justificarlo dentro de un hero de 1400 píxeles con capa oscura.
Recorta fotogramas que nadie ve y crea un bucle corto sin salto perceptible. Si necesita 40 segundos de narración, probablemente es contenido y debe ofrecer controles.
Elimina audio de un fondo decorativo: autoplay suele exigir silencio y la pista sigue sumando datos.
Crear un derivado MP4 controlado
FFmpeg puede generar H.264 compatible:
ffmpeg -i hero-master.mov
-vf "scale=1600:-2"
-c:v libx264
-preset slow
-crf 25
-an
-movflags +faststart
hero-web.mp4scale=1600:-2 limita el ancho y calcula una altura par. Un CRF menor conserva más detalle y suele pesar más. -an elimina audio y +faststart mueve los metadatos al inicio para reproducir antes de descargar todo.
Son valores de prueba, no universales. Texto fino, degradados y movimiento rápido pueden requerir otros ajustes.
Evaluar calidad en el diseño
Mira el derivado en móvil normal y escritorio con el recorte real. Busca bloques en sombras, bandas y movimiento entrecortado. La capa del hero puede ocultar detalle, así que juzga el resultado dentro de la página.
Exporta dos o tres variantes y elige la menor que siga pareciendo intencionada. Conserva el master respaldado: recomprimir la copia web acumula artefactos.
Preparar el poster
Extrae o diseña una imagen representativa con la misma proporción y pásala por el flujo responsive normal. Debe funcionar como presentación permanente si el vídeo no reproduce.
Evita texto promocional dentro del vídeo o poster cuando pueda estar en HTML, donde resulta accesible, indexable, editable y adaptable.
Reserva proporción o altura mínima para que el cambio de poster a reproducción no desplace la página.
Verificar cabeceras y rangos
El servidor debe responder Content-Type: video/mp4 y, cuando sea compatible, aceptar solicitudes parciales:
curl -I https://example.com/wp-content/uploads/hero-web.mp4Comprueba estado correcto, tipo, longitud y Accept-Ranges: bytes. Los rangos permiten pedir partes sin reiniciar toda la transferencia.
Si existe CDN, revisa respuesta pública y origen. Reglas de seguridad o protección anti-hotlink pueden interferir.
Evitar procesamiento y límites innecesarios
WordPress no genera tamaños de vídeo como hace con imágenes. El archivo subido suele ser el entregado; comprímelo antes en lugar de esperar que un plugin de imágenes lo haga.
No eleves upload_max_filesize o post_max_size solo para aceptar un master inadecuado. Un medio grande también encarece copias, migraciones y disco.
Para mucho tráfico o una biblioteca de vídeos puede convenir almacenamiento de objetos o streaming especializado. Un fondo corto puede servirse localmente si servidor y CDN responden bien.
Integrar sin forzar la descarga
Usa poster, autoplay silenciado, playsinline y precarga conservadora. No precargues el MP4 completo desde la cabecera. Considera servir solo el poster en pantallas pequeñas o con prefers-reduced-motion.
Inspecciona el marcado publicado: el constructor puede duplicar fuentes o añadir un vídeo móvil sin retirar el de escritorio.
Probar la página completa
Haz una visita fría con datos móviles. El poster debe aparecer pronto, el título seguir legible, el vídeo no bloquear el CTA y el bucle no elevar demasiado la CPU.
Compara los bytes del medio con CSS, fuentes e imagen principal. Ahorrar un 50 % no basta si aún se transfieren varios megabytes antes de poder actuar.
Si cabeceras, caché CDN, constructor o fallback no están claros, una evaluación puede acotar el trabajo con la URL pública y especificaciones de la fuente, sin contraseñas inicialmente.