Vídeo de fondo con CMS en Webflow: un vídeo distinto por elemento

Actualización, octubre de 2026: las cosas han cambiado desde que escribí esto. El enfoque más reciente está en Creación de vídeos de fondo con CMS en Webflow usando el Custom Element. El resto de este post sigue en pie como registro de cómo lo hicimos en su momento.

¿Que para qué querrías hacer esto? Pues, por ejemplo, para tener un vídeo de fondo distinto en la sección hero de la página de plantilla de una lista de colección CMS. O quizá tienes una lista de colección en una página y necesitas un vídeo diferente en cada elemento. En nuestro caso, como estudio de Webflow, fue un proyecto reciente para un cliente en el que la sección hero de la página de inicio tenía que cambiar según el día de la semana, con un vídeo distinto como elemento de fondo cada día (cómo configuramos el vídeo según el día de la semana lo contaremos en un próximo post), y luego ese mismo vídeo tenía que reproducirse en la página de la lista de colección de cada ocasión. Necesitábamos que fueran los elementos del CMS los que determinaran qué vídeo se reproducía, pero eso no se podía hacer con el elemento de vídeo de fondo estándar de Webflow, así que hicimos esto:

Vamos a enseñarte cómo añadir el fondo a un elemento del CMS subiéndolo a Webflow en un elemento de vídeo de fondo, cómo usar un elemento HTML embed para llevar el vídeo al elemento de la lista de colección en la página de plantilla o en el elemento de lista de colección de una página, y cómo ocultar después el elemento de fondo original para que no desaparezca al publicar. Milk Moon Studio es un pequeño estudio de Webflow, así que nos gustan las cosas simples y low-code, y eso es lo que vamos a mostrarte.

Hay dos escuelas de pensamiento sobre cómo hacerlo, y nosotros vamos a usar la primera, pero puedes probar la segunda, así que te las contamos.

Subes a Webflow los vídeos que quieres usar en un elemento de vídeo de fondo que acaba oculto, para que el vídeo se quede en tu proyecto. Este enfoque te permite, en cierto modo, seguir usando la funcionalidad nativa con un pequeño truco. Webflow seguirá transcodificando el vídeo y lo dará en WebM y MP4, y usarás los dos y dejarás que el navegador del usuario decida cuál mostrar en la página según lo que admita. Además, usarás la CDN de AWS de Webflow para alojar el contenido en los centros de datos de Amazon.
El segundo enfoque funciona igual en cuanto a configurar un embed y un campo que haga referencia al vídeo en tu lista de colección, pero el vídeo no lo alojas en Webflow. En su lugar, contratas una cuenta de Vimeo. Eso te permitirá personalizar los ajustes del embed, etc., y luego haces referencia al vídeo en el elemento del CMS. En lugar de usar un vídeo WebM o MP4 transcodificado por Webflow, tendrás un vídeo de Vimeo en bucle de fondo. El código cambia un poco, y hablamos de ello al final del post. Hace poco añadimos un post sobre cómo controlar y optimizar los embeds de vídeo de fondo de Vimeo con código de intersection observer, así que échale un vistazo también.
Opción 3: sí, dijimos dos, pero son tres. Combina las opciones uno y dos. Compra una cuenta de Vimeo Pro para poder obtener las URL de los vídeos en Vimeo, y luego usa el código de embed que damos para la opción uno con los enlaces de los vídeos de Vimeo, sin usar los ID de Vimeo como harías en la opción 2. Esta no la vamos a cubrir, ya te las apañarás.

Bueno, empecemos con el método de Webflow:

Paso 1: Configura tu colección CMS

Vas a necesitar dos campos, uno para la URL del vídeo MP4 y otro para la del WebM.

Crea 2 campos de texto plano, uno llamado MP4 y otro llamado WebM.

Configura campos de vídeo personalizados en tu CMS de Webflow

Con eso queda lista la configuración de la lista de colección CMS. Por supuesto, puedes añadir cualquier otro campo que necesites en la lista de colección.

Paso 2: Configura tu elemento de vídeo de fondo en la página de plantilla del CMS o en el elemento de la lista de colección

Ve al elemento donde necesites que aparezca el vídeo. Puede ser un elemento de una lista de colección en una página estática o una página de plantilla del CMS. Vas a querer un contenedor para el vídeo, así que mete un div; nosotros lo llamamos video cover.
Pon el div en posición relative y dale el tamaño que le habrías dado al elemento de vídeo de fondo si hubieras podido usarlo. Si vas a poner texto o lo que sea encima del vídeo, también querrás que el elemento donde está este div tenga posición relative, para poder apilarlos con z-index. Nosotros tenemos el contenedor del vídeo en 1 y el contenido encima en 2, así los apilamos bien y el vídeo queda por debajo.

Define el z-index en el div de la portada de vídeo

Hemos puesto nombres claros a todo en la captura para que veas cómo los apilamos. video cover es el div contenedor que llevará el elemento embed. Encima tiene una superposición de color con un 20% de opacidad en negro, para que la compresión se note un poco menos (más sobre eso en los consejos del final), y el texto va sobre esa superposición. La superposición de color también hace más legible el texto, porque algunos de nuestros vídeos tienen elementos blancos. Nuestro div video cover también tiene posicionamiento absolute con un 100% de ancho y de alto, porque queremos que llene todo el fondo de la sección hero de esta página.

Ahora suelta un HTML embed dentro del contenedor del vídeo. Aquí va el código que hace que todo esto funcione bien:

Embed de vídeo de fondo en Webflow

Añade el siguiente código y selecciona los campos MP4 y WebM que creaste antes.

Código del HTML embed en Webflow para un vídeo de fondo desde el CMS

¿Y qué está pasando aquí? El embed reproducirá un vídeo de fondo en línea y en bucle. Si el navegador admite vídeo HTML5 y WebM, elegirá ese; si no, usará por defecto el vídeo MP4.

Con eso termina la configuración del CMS, pero ¿de dónde sacamos las URL de los vídeos que hay que añadir a los elementos de la lista de colección?

Diagrama de las capas de la sección hero: el contenido con z-index 2 arriba, una superposición de color negro al 20 % y debajo el div video cover con z-index 1

Paso 3: Consigue las URL de los vídeos

La parte menos divertida. No puedes simplemente subir los vídeos: Webflow tiene que transcodificarlos y añadirlos a la CDN. La forma más fácil de completar este paso es crear una página estática, soltar un elemento de vídeo de fondo por cada vídeo que necesites, añadir los vídeos a esos elementos y publicar la página. Ve a la página publicada e inspecciona el código. Cada vídeo que subiste tendrá una URL de vídeo MP4 y otra WebM (espera a que Webflow termine de comprimir los vídeos antes de hacerlo). Copia la URL WebM y la MP4 de cada elemento de vídeo de fondo y pega cada una en los dos campos de vídeo que creaste en el Paso 1, en el elemento del CMS que corresponda.

Muy importante: no borres los elementos de vídeo de fondo que acabas de crear. Tienen que quedarse en Webflow mientras necesites los vídeos en el CMS. Basta con pasar a borrador la página estática que creaste para quitarla del proyecto publicado y no tendrás problema. La página no será visible en el sitio publicado, pero los archivos de vídeo seguirán ahí.

Eso es todo, ya está; ve a previsualizar los vídeos publicados.

Consejos para mejores vídeos de fondo

COMPRIME hasta la saciedad el vídeo. Webflow va a transcodificarlo y escupir una versión WebM, pero conviene que lo comprimas antes. La usabilidad es clave y no quieres que el vídeo lastre el navegador del usuario, así que empieza por lo pequeño. Recomendamos Handbrake. Es gratis y puedes pasarte un día ajustando opciones hasta dar con lo que buscas. Hemos visto a mucha gente decir que hay que apuntar a unos 720p con una tasa de fotogramas baja, de unos 25 fotogramas por segundo, y bitrates de entre 750k y 1250k, y quedarte con el más bajo que te parezca aceptable. Puedes reducirlo un poco más y probar los dos ajustes siguientes cuando ya hayas añadido los vídeos a Webflow.
Superposición de color. Necesitas un vídeo grande, pero después de dejarlo al tamaño que quieres no se ve demasiado bien. Pon una superposición negra sobre el vídeo y ajusta la transparencia para que el vídeo siga viéndose, pero la superposición suavice la compresión que aplicaste.
Desenfoque. Igual que lo anterior: pon un div sobre el elemento de vídeo y aplica un desenfoque para suavizar los artefactos que crea la compresión.
Las superposiciones con patrón también pueden ayudar; deja la transparencia del patrón lo más baja posible sin dejar de ocultar los artefactos.
Si te cuesta mantener el peso bajo, elige un vídeo muy corto que haga un bucle perfecto. Cuanto más corto el vídeo, menor el tamaño, y si encuentras algo cuyo principio y final encajan, el bucle se nota menos.
Evita el movimiento, lo cual suena contradictorio cuando quieres añadir vídeo, que por naturaleza tiene movimiento. Nos referimos a movimientos rápidos, vídeo tembloroso y cosas así.
Para los más intrépidos, también puedes pausar el vídeo con algo de JavaScript tras cierto número de bucles, lo que aliviará la carga del navegador.
Si te preocupa el móvil, pon el vídeo en display: none en móvil y usa en su lugar una imagen estática o un gif muy, muy pequeño (nosotros decimos jif).
Si no te sientes seguro con Handbrake o una app parecida para comprimir, Webflow recomienda Clipchamp. Solo ten en cuenta que cuando escribimos esto el plan gratuito solo exportaba en SD, pero ahora exporta hasta 1080p.

Método con Vimeo

Con Vimeo necesitarás una cuenta de pago para obtener los ID del embed, y cuesta más conseguir que cubra un área, porque el elemento intentará mantener la relación de aspecto original. Tranquilo, el truco que tienen aquí funciona muy bien, así que échale un vistazo. Nosotros también lo hemos usado con algún retoque.

Hay varias implementaciones distintas de Vimeo en cuanto al código del HTML embed. Se verá más o menos así:

Acuérdate de comprobar que cubre bien el área en todos los breakpoints de dispositivo.

Hemos comprobado que, aunque el método de Vimeo a veces da peores resultados de velocidad de página, el tiempo hasta la interacción, cuando el usuario ya puede usar el sitio de verdad, es algo más rápido con Vimeo, aunque el vídeo tarda un poco más en cargar por los iframes. Dejaremos que sean los expertos en Webflow quienes decidan qué opción les gusta más.

Eso sí, a veces un elemento de vídeo funciona mejor con Vimeo. Algo así:

Tienes más control porque no entra en juego el bitrate adaptativo de Vimeo, etc. Ten en cuenta que da un poco más de trabajo: en este ejemplo añadirás tres URL de Vimeo para el archivo en lugar de solo el ID de Vimeo. Además, asegúrate de que al copiar las URL desde la página de Vimeo de tu vídeo uses las URL de descarga de Vimeo y no las URL del reproductor, porque las del reproductor caducan a los 2 días. Simplemente haz clic en el nombre del vídeo, saca los enlaces del desplegable y recuerda: las URL de descarga. Cuáles elijas depende de ti y de la calidad del archivo subido; lo normal es optar por una de calidad alta, una media y una baja, pero puedes añadir más, etc., como prefieras.

También creamos un post más reciente dedicado específicamente al vídeo de fondo de Vimeo y al uso de código de object intersect para optimizar y controlar tanto los vídeos como otros elementos del sitio según el estado del vídeo, así que échale un vistazo también, pero para las etiquetas de vídeo puedes usar el script de Play y Pause de Finsweet para optimizar el rendimiento, simplemente reproduciendo los vídeos cuando están en el viewport y pausándolos cuando salen de él.

Esa es la forma de hacerlo con la lista de colección. Si prefieres ir por la vía del Custom Element, lo hemos explicado en nuestro post más reciente sobre vídeos de fondo con CMS usando el Custom Element. Y si te gustan este tipo de trucos con el CMS, nuestros posts sobre degradados de fondo con CMS en Webflow y cómo crear text spans en elementos de texto dinámicos del CMS van en la misma línea.

Preguntas frecuentes sobre vídeos en Webflow

¿Cómo subo un vídeo a Webflow?

Puedes subir un archivo de vídeo a Webflow como vídeo de fondo, pero no al elemento Video estándar. El elemento Video solo acepta enlaces de sitios como YouTube y Vimeo, mientras que el elemento Background Video acepta archivos de menos de 30MB en formato WebM, MP4, MOV u OGG y los transcodifica a MP4 y WebM por ti. El propio artículo de ayuda de Webflow sobre estilos de fondo tiene los detalles.

¿Cómo añado un vídeo de fondo distinto a cada elemento del CMS en Webflow?

Añade a tu colección dos campos de texto plano para las URL de MP4 y WebM, sube cada vídeo una vez en un elemento de vídeo de fondo en una página que mantengas en borrador, y luego pega las URL publicadas en los elementos del CMS y reprodúcelos con un HTML embed dentro del elemento de la lista de colección. Los pasos 1 a 3 de arriba lo explican paso a paso.

¿Qué tamaño debe tener un vídeo de fondo en Webflow?

Mantenlo pequeño: unos 720p, alrededor de 25 fotogramas por segundo y un bitrate de entre 750k y 1250k, comprimido antes de subirlo. Además, el elemento Background Video de Webflow tiene un límite de archivo de 30MB, así que un vídeo corto que haga un bucle perfecto es tu mejor aliado.

¿Debo alojar los vídeos de fondo en Webflow o en Vimeo?

Depende del proyecto, así que lo dejamos en tus manos. En nuestras pruebas, el método de Vimeo a veces da peores resultados de velocidad de página pero llega algo antes al tiempo hasta la interacción, mientras que el vídeo en sí tarda un poco más en cargar por los iframes.

Si tienes preguntas, deja un comentario, y si buscas más tutoriales, echa un vistazo a nuestra sección How-To.