Cómo crear un video de fondo con CMS en Webflow con elementos personalizados: un video HTML5 nativo y etiquetas source vinculadas a campos del CMS, sin código personalizado, más un clonable.
Hoy vamos a construir videos de fondo alimentados por el CMS en tus proyectos de Webflow, usando elementos personalizados para tener un <!-- fs-richtext-ignore --> <video> de fondo nativo, sin código personalizado ni embeds. Al final del artículo también encontrarás un clonable para que lo clones y un video corto donde lo explicamos.
¿Qué es un video de fondo, en realidad?
En pocas palabras, es un video silencioso, en bucle, normalmente pequeño, que se reproduce solo y que casi siempre va detrás de otra cosa. Piénsalo como el héroe anónimo de la estética web, que trabaja sin descanso entre bambalinas. ¿Quieres probarlo?
<iframe height="300" style="width: 100%;" scrolling="no" title="Background Video Example" src="https://codepen.io/milkmoonstudio/embed/qBvgpjK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/qBvgpjK">
Background Video Example</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
Lo importante aquí son autoplay, muted y loop. La solución en Webflow suele ser muy sencilla: añades un elemento de video de fondo, subes un video pequeño y listo. Solo que, bueno, eso no funciona en páginas CMS ni en listas de colección, porque el archivo se sube al propio elemento en lugar de tomarse de un campo del CMS. ¿Cuál es la solución? Pues lo habitual era meter código incrustado a medida, ya fuera para un <!-- fs-richtext-ignore --> <video> o un <iframe> (y lo hemos cubierto en otro artículo aquí), pero ahora que tenemos el elemento personalizado en Webflow, podemos construir un elemento de video con al menos dos elementos personalizados (quizá más): uno para el video y uno para cada fuente dentro de él.
Pero antes, hablemos de iframe frente a video.
Sopesando tus opciones
Elegir entre una etiqueta <!-- fs-richtext-ignore --> <video> y un iframe depende de lo que necesites:
- Si buscas rendimiento y control directo sobre tu contenido de video, con mejores perspectivas de SEO, elige la etiqueta <!-- fs-richtext-ignore --> <video>.
- Si tus prioridades son la facilidad de uso, el acceso a funciones propias de la plataforma y algo más de seguridad, un iframe puede ser el camino.
Ambos enfoques tienen su lugar en la caja de herramientas de quien diseña para la web, y la elección correcta depende del equilibrio entre control, rendimiento y funcionalidad en tu proyecto. Yo diría que los iframes cargan más lento y, cuando usas algo como Vimeo como fuente del video, la calidad puede resentirse, porque no tienes control sobre las tasas de bits adaptativas, etc. Si quieres Vimeo como fuente, también escribimos sobre cómo optimizar videos de fondo de Vimeo en Webflow con código de intersección.
Entra el elemento personalizado: el gran cambio de Webflow
El elemento personalizado de Webflow es como encontrar un pasadizo secreto en un videojuego que lleva a tesoros escondidos. Nos permite crear elementos HTML directamente en el lienzo, incluidos algunos que Webflow no ofrece de forma nativa, y una vez dentro de una lista de colección puedes vincularlo a campos del CMS, atributos, etiquetas y texto. Para verlo más de cerca, echa un vistazo a la guía de Webflow sobre el elemento personalizado. Esta joyita es nuestro billete para traer videos controlados por el CMS como elementos de fondo. (Si quieres más trucos para vincular el CMS, mira nuestro artículo sobre crear spans de texto en elementos de texto dinámico del CMS.)
Cómo crear tu video de fondo alimentado por el CMS
Paso 1: Configura tu colección del CMS
Empieza creando una colección del CMS que contenga tus archivos de video. Piensa en ella como tu videoteca, donde cada libro es una historia fascinante a la espera de ser contada. Solo necesitas las URL de descarga de Vimeo. Haz clic en los enlaces de archivo de video en Vimeo y cambia a los enlaces de descarga en lugar de los enlaces del reproductor, porque los enlaces del reproductor caducarán. (Una corrección de 2026: ese último motivo ya no es cierto. Vimeo dice que los enlaces de reproductor de terceros (Video file links, luego Play the video) no caducan. Conviene saber también que Vimeo solo ofrece estos enlaces directos en su plan Standard o superior, y que si bajas de plan, los enlaces que tengas incrustados dejan de funcionar hasta que vuelvas a subir. Fuente: help.vimeo.com/hc/en-us/articles/12426150952593.) Lo habitual es añadir tres por cada video, aunque con uno basta: calidad alta, media y baja. Ve con calma con la alta, porque un video 4K puede acabar con el rendimiento del sitio. (Una corrección de 2026: los navegadores no eligen la mejor calidad por ti. MDN dice “El navegador recorre una lista de elementos <source> para encontrar un formato que pueda reproducir. Usa el primero que puede mostrar.” Así que el orden de tus elementos source importa, y conviene poner primero el archivo que más quieres que se reproduzca.)
Paso 2: Pon a trabajar los elementos personalizados
Con el escenario listo, usaremos elementos personalizados para crear una etiqueta <!-- fs-richtext-ignore --> <video> nativa de HTML5, vinculando de forma dinámica nuestros elementos del CMS. Imagina conjurar un reproductor de video de la nada, impulsado por la magia de Webflow y tu CMS. Con la configuración que acabo de describir, necesitarás cuatro elementos personalizados: el video y, dentro de él, tres elementos source.
Una vez montada la estructura, asignarás la etiqueta a los cuatro elementos: el exterior será video y los interiores serán source.
Aquí puedes ver que usamos atributos para aplicar loop=true, muted=true y playsinline=true, y lo demás es la guinda del pastel. (También querrás poner autoplay=true en el video, porque eso es lo que hace que arranque solo. Los navegadores suelen bloquear la reproducción automática de videos con sonido, así que muted=true es lo que permite que arranque solo.)
Verás que usamos atributos para vincular la URL al src. Eso y el type son lo más importante.
Paso 3: Dale estilo e intégralo
A continuación, daremos estilo a nuestro video para que encaje a la perfección como elemento de fondo, de modo que complemente tu diseño sin eclipsarlo. Es como vestir a tu video con su mejor traje de domingo. En el caso del clonable, creamos una caja con proporción 16:9 alrededor del video y pusimos el video en absolute y cover, de manera que, bueno, cubra la caja de proporción sin importar el tamaño del video. Esta parte depende de lo que quieras lograr.
Consigue el clonable
Como lo nuestro es compartir (y ahorrarte tiempo), hemos preparado un proyecto clonable de Webflow. Es como entregarte las llaves del reino: lo tomas, lo clonas y lo personalizas a tu gusto. Encontrarás más como este en nuestros clonables de Webflow.
También hay un video donde me enrollo explicando el clonable, pero seguro que te las arreglas. Disfrútalo, deja un comentario si tienes preguntas, intentaremos responderlas, y hay más sobre cómo usar código personalizado para hacer lo mismo en este artículo. ¿Buscas otro truco impulsado por el CMS? Echa un vistazo a nuestros degradados de fondo alimentados por el CMS o a nuestra cinta de noticias alimentada por el CMS.
Preguntas frecuentes
¿Puedo usar un campo del CMS para un video de fondo en Webflow?
No directamente con el elemento de video de fondo integrado. Webflow lo describe como un componente al que subes un archivo de video, en lugar de uno alimentado por un campo del CMS. El enfoque del elemento personalizado de arriba lo resuelve, porque las URL del video salen del elemento de tu colección y los elementos están vinculados a ellas.
¿Qué tamaño puede tener un video de fondo en Webflow?
El video de fondo integrado de Webflow acepta archivos de menos de 30 MB en formato webm, mp4, mov u ogg. Con el método del elemento personalizado los archivos están en Vimeo (o donde los alojes), así que ese límite no se aplica, pero cuanto más pequeño, mejor: mantén los archivos cortos, comprimidos y de baja resolución.
¿Un video de fondo del CMS se reproducirá automáticamente en el móvil?
Normalmente sí, siempre que tenga autoplay, muted y playsinline configurados. Los navegadores bloquean la reproducción automática de videos con sonido, por eso muted importa. Ten en cuenta que el componente de video de fondo de Webflow añade un botón de reproducir/pausar y se detiene para los visitantes con movimiento reducido activado, y un video con elemento personalizado no añade ninguna de las dos cosas por sí solo, así que añade tu propio control de pausa si el video es grande o distrae.
