Skip to content

Todo para WordPress, el desarrollo web — y mucho más

💡 Cómo optimizar video de fondo para tu sitio web: formatos, compresión y plugins

💡 Cómo optimizar video de fondo para tu sitio web: formatos, compresión y plugins

El video de fondo hace que un sitio web cobre vida. Pero cuando pesa 40 MB y tarda cuatro segundos en cargar, los visitantes se van antes de ver su contenido.

Según datos de HTTP Archive para 2025, el video representa hasta el 20% del peso total de las páginas con mucho contenido multimedia. Google considera la velocidad de carga en los rankings y las Core Web Vitals penalizan un LCP lento. Un video de fondo pesado perjudica tanto a los usuarios como al SEO.

A continuación presentamos un algoritmo paso a paso para comprimir video de fondo a 5 MB sin pérdida visible de calidad. Con herramientas gratuitas, sin registro, sin marcas de agua.

💡 Resumen rápido:

  • Formatos: prepare MP4 (H.264) + WebM (VP9), dos archivos que cubren todos los navegadores modernos
  • Herramienta: HandBrake, gratuito, de código abierto, con control preciso de bitrate y resolución
  • Para Mac: exportación integrada de QuickTime, sin instalar software de terceros
  • Truco de YouTube: suba el video, YouTube lo recomprime, descargue de vuelta el MP4 optimizado
  • Servicios en línea: CloudConvert, VideoSmaller, Clipchamp, cuando no quiera instalar software
  • WordPress: plugins mb.YTPlayer y Video Background, video de fondo sin editar el tema

Formatos: por qué necesita dos archivos

El video de fondo debe reproducirse sin problemas en todos los navegadores. Un solo formato no basta.

MP4 (H.264), el formato principal. Funciona en Safari, Chrome, Edge, Opera y en todos los dispositivos móviles. Es la base que todo navegador entiende sin excepción.

WebM (VP9), el formato complementario. El archivo es notablemente más pequeño con la misma calidad. Chrome y Firefox priorizan WebM, lo que ahorra ancho de banda al usuario. Según Google Developers, VP9 ofrece hasta un 50% de ahorro de bitrate en comparación con H.264 con idéntica calidad visual.

Para móviles, un póster JPG estático. Si el navegador rechaza la reproducción automática (ahorro de datos, red lenta), los usuarios ven una imagen en lugar de un espacio vacío.

Rara vez se justifica una resolución superior a 720p para fondos. Un ancho de 1280 píxeles cubre toda la pantalla de una laptop y el archivo pesa varias veces menos que Full HD. Verifique en su maqueta: probablemente 720p satisfaga sus necesidades con margen de sobra.

Paso 1: HandBrake, la herramienta principal

HandBrake es un conversor de video gratuito y de código abierto para Windows, Mac y Linux. Ofrece control total sobre códec, bitrate y resolución. Sin marcas de agua, sin registro, sin límites de tamaño de archivo.

Interfaz de HandBrake: configurar compresión de vídeo para la web

Algoritmo para comprimir video de fondo:

  • Descargue HandBrake desde el sitio oficial y abra su archivo de video de origen.
  • En la pestaña Summary, seleccione el formato MP4 y marque Web Optimized. Esto mueve los metadatos al inicio del archivo, para que el video comience a reproducirse de inmediato sin esperar una descarga completa.
  • En la pestaña Dimensions, establezca el ancho en 1280. La altura se ajusta automáticamente. Deje el filtro Anamorphic en Automatic.
  • En la pestaña Video, seleccione el códec H.264 (x264). Coloque el control deslizante Constant Quality en el rango de 22-26 RF. Números más altos significan archivos más pequeños. Óptimo: 24 RF.
  • Elimine la pista de audio. El video de fondo es silencioso por defecto; desmarque la casilla en la pestaña Audio.
  • Haga clic en Start Encode. Un archivo de 30-50 MB se comprime a 3-8 MB. La calidad sigue siendo aceptable para fondos.

Para la versión WebM, repita los mismos pasos, pero en el paso 2 seleccione el formato WebM y en el paso 4 seleccione el códec VP9.

En la práctica, un solo pase por HandBrake reduce el tamaño del video de fondo entre 5 y 10 veces. Los visitantes no notan la diferencia y la página carga 2-3 segundos más rápido. Esto es lo primero que hacemos con cualquier video antes de subirlo a un sitio web.

Paso 2: Compresión en Mac con herramientas integradas

Si usa macOS, no necesita instalar nada. La exportación integrada de QuickTime maneja la compresión básica.

  • Abra el archivo de video en QuickTime Player.
  • Seleccione Archivo → Exportar → 720p.
  • Especifique el nombre y la carpeta. El archivo se guarda como MP4 con códec H.264.

Este método no ofrece un control fino del bitrate, pero es suficiente para resultados rápidos. Un archivo de origen de 60 MB se convierte en 8-12 MB sin esfuerzo adicional.

Una opción integrada más avanzada es iMovie. Importe el video, seleccione Archivo → Compartir → Archivo, elija resolución 720p y calidad "Media". iMovie ofrece un control ligeramente mejor sobre el tamaño final que QuickTime. Para un trabajo afinado, HandBrake sigue siendo mejor, pero cuando necesita algo "aquí y ahora", las herramientas de Mac son suficientes.

Paso 3: Compresión a través de YouTube, un truco rápido

La forma más fácil de obtener video optimizado es pasarlo por YouTube.

  • Suba el video a YouTube. Puede configurarlo como "No listado" para que no aparezca en búsquedas públicas.
  • Espere a que se complete el procesamiento. YouTube transcodifica automáticamente el video a todos los formatos y resoluciones modernos.
  • Descargue de vuelta el MP4 optimizado usando un conversor, por ejemplo, CloudConvert.

Resultado: los algoritmos de compresión de YouTube, algunos de los mejores de la industria. El archivo resulta pequeño y visualmente limpio. Este método ayuda cuando HandBrake no está disponible y necesita compresión de inmediato.

Un enfoque alternativo es no subir el archivo de video a su hosting en absoluto. Incruste el video de YouTube como fondo mediante el plugin mb.YTPlayer (sección más abajo). Esto ahorra espacio en el servidor y ancho de banda, aunque da menos control sobre la reproducción.

Herramientas en línea: cuando no quiere instalar software

Si no quiere instalar HandBrake y el archivo es pequeño, los compresores basados en navegador funcionan bien.

Herramienta

Precio

Limitaciones

Formatos

CloudConvert

Gratis hasta 25 conversiones por día

Límite de tamaño de archivo en la versión gratuita

MP4, WebM, MOV y más de 200

VideoSmaller

Completamente gratis

Solo MP4

Archivos de hasta 500 MB

Clipchamp

Gratis (básico)

Exportación hasta 1080p

MP4, WebM, MOV

CloudConvert es una herramienta universal. Admite más de 200 formatos y convierte MP4 a WebM con un clic. El límite gratuito es suficiente para optimización ocasional. Inconveniente: la velocidad depende de la cola del servidor.

VideoSmaller es un servicio minimalista para una sola tarea: comprimir MP4. Interfaz de dos botones: subir y descargar. No requiere registro. No funciona con WebM ni MOV, solo MP4.

Clipchamp es un editor de video de Microsoft con exportación integrada. La versión gratuita permite exportar hasta 1080p sin marcas de agua en su contenido. Las marcas de agua solo aparecen al usar recursos de stock de Clipchamp. Para comprimir su propio video, es una opción válida.

Nota: los servicios en línea suben el video a servidores de terceros. Para materiales privados o confidenciales, use HandBrake localmente.

Plugins de WordPress para video de fondo

Si su sitio funciona con WordPress, incrustar video de fondo es más fácil con plugins. No necesita editar el tema ni escribir CSS.

mb.YTPlayer incrusta video de YouTube como fondo de página o sección. La ventaja es que el video en sí se almacena en los servidores de YouTube y no carga su hosting. El plugin añade un shortcode; insértelo donde lo necesite y el video se reproduce como fondo. En dispositivos móviles, el video comienza con el primer toque en la pantalla. El plugin tiene más de 1000 instalaciones activas y una calificación de 4.1 en WordPress.org.

🔗 mb.YTPlayer en WordPress.org

Video Background es una solución para sus propios archivos de video. Usted especifica el contenedor, un enlace al MP4 y un enlace al WebM. El plugin detecta automáticamente el navegador y sirve el formato apropiado. Compatible con WPBakery y SiteOrigin. Configuración mínima.

🔗 Video Background en WordPress.org

Easy Video Background WP en CodeCanyon es una opción de pago con funciones ampliadas: temporizador de reproducción automática, superposición personalizable, control de volumen. Pago único.

Si su video ya está en YouTube, use mb.YTPlayer. Si tiene sus propios archivos MP4 y WebM en su hosting, use Video Background. ¿Necesita ajustes finos de visualización? Easy Video Background WP.

Una demostración visual del proceso de compresión, desde la selección de formato hasta la exportación final:

⁉️🤔 Preguntas frecuentes

¿El video de fondo tiene que ser silencioso?

Sí. La reproducción automática con sonido es molesta y está prohibida por las políticas de la mayoría de los navegadores. Chrome y Safari bloquean la reproducción automática con sonido desde 2018. Elimine la pista de audio durante la exportación y el archivo se vuelve notablemente más ligero.

¿Cuánto debe pesar un video de fondo?

Un buen punto de referencia es hasta 5 MB para 10-15 segundos de fondo en 720p. Cualquier cosa que pese más de 8 MB ralentiza notablemente la carga en redes móviles. HandBrake con RF 24 a 720p generalmente se mantiene dentro de este rango.

¿MP4 o WebM: cuál es mejor para fondos?

Ambos. MP4 es para Safari e iOS (no entienden WebM). WebM es para Chrome y Firefox (archivo más pequeño con la misma calidad). Un marcado correcto con la etiqueta video selecciona automáticamente el formato apropiado. Prepare siempre ambos archivos.

¿Se puede usar video de YouTube como fondo directamente?

Técnicamente sí, mediante la API IFrame de YouTube o el plugin mb.YTPlayer. Pero hay inconvenientes: los controles de YouTube son visibles al pasar el cursor, los anuncios pueden interrumpir el fondo, la precarga es más lenta que con archivos propios. Para fondos sin concesiones, es mejor subir sus propios MP4 y WebM.

¿Qué se debe mostrar en móviles si el video no carga?

Un póster JPG estático: el primer fotograma del video o una imagen especialmente preparada. Se configura mediante el atributo poster en la etiqueta video. La mayoría de los plugins de WordPress añaden un póster automáticamente desde el primer fotograma.

¿Vale la pena el esfuerzo de optimizar?

La diferencia entre un MOV crudo de 40 megabytes y un MP4 comprimido de 4 megabytes son 2-3 segundos de tiempo de carga de página. Para los visitantes en redes móviles, esos segundos determinan si se quedan o se van.

HandBrake gratuito, exportación integrada de Mac o cinco minutos en CloudConvert: esfuerzo mínimo, resultados inmediatos. La página vuela, Google está contento, los visitantes ven video en lugar de un precargador.

Si usa WordPress, instale mb.YTPlayer o Video Background y olvídese de la codificación manual. Si tiene sus propios archivos, prepare siempre MP4 + WebM y mantenga el tamaño final por debajo de 5 MB. Esta es la base que funciona en cualquier sitio, desde páginas de aterrizaje hasta tiendas en línea.