Video de fondo de Vimeo en Webflow: optimiza con Intersection Observer

Hace poco nos encargaron diseñar y construir un sitio nuevo para una productora de video, y con ello llegó el uso a gran escala de video de fondo. Al final elegimos los videos de fondo de Vimeo en lugar del video de fondo de Webflow o de proveedores externos. Los proveedores externos quedaron fuera porque ya tenían un servicio para esto, pero el rendimiento era… mediocre. El video de fondo de Webflow quedó fuera porque:

Era demasiado difícil de cambiar para el cliente.
Tenía que ser fácil de gestionar, es decir, desde el CMS, y el video de fondo de Webflow y el CMS no se llevan bien.
Ya tenían una cuenta Vimeo Pro con un par de cientos de anuncios de TV y similares que podíamos importar directamente al CMS de Webflow con sus metadatos, todas las descripciones, títulos, etc.

El video de fondo de Vimeo es sorprendentemente fácil de implementar en Webflow:

Pero lo único que necesitas para empezar es el src: añade el ID de Vimeo y la consulta que le sigue para que se reproduzca, se repita en bucle y siga silenciado. Aquí tienes una explicación del resto, por si quieres saber exactamente qué está pasando:

El código HTML crea un elemento iframe con el ID "vimeo-video". Ahí es donde se incrustará el video de Vimeo en la página. Esto es importante porque nuestro primer observador de intersección buscará “vimeo-video”.
El atributo "loading" está establecido en "eager", lo que le dice al navegador que cargue el iframe y su contenido lo antes posible, sin esperar al resto de la página. Está en la parte visible sin hacer scroll, así que lo queremos rápido.
El atributo "preload" está establecido en "auto", lo que le dice al navegador que precargue el archivo de video para que pueda empezar a reproducirse lo antes posible. Igual que lo anterior.
El atributo "title" establece el título del iframe como "Name".
El atributo "src" contiene la URL del video de Vimeo con parámetros adicionales. El parámetro "background=1" hace que el video se reproduzca como video de fondo, y el parámetro "loop=1" hace que se repita de forma continua. El parámetro "autopause=0" evita que el reproductor de Vimeo pause este video cuando empieza otro video de Vimeo en la misma página (por defecto el reproductor solo reproduce un video a la vez), y el parámetro "muted=1" hace que el video se reproduzca sin sonido. El parámetro "quality=auto" hace que la calidad del video se ajuste automáticamente según la velocidad de conexión del usuario. El parámetro "responsive=1" hace que el video se adapte a distintos tamaños de pantalla. El parámetro "dnt=1" impide que el reproductor de Vimeo recopile datos de sesión y analíticas, así que no se registra ninguna analítica (Vimeo indica que algunas cookies esenciales siguen activas).
El atributo "style" establece el color de fondo del iframe en blanco.
Los atributos "width" y "height" están en 100% para que el iframe ocupe todo el ancho y el alto de su contenedor.
El atributo "frameborder" está en 0 para quitar el borde alrededor del iframe.
El atributo "allow" permite que el iframe reproduzca automáticamente y entre en modo de pantalla completa.
El atributo "allowfullscreen" permite que el iframe entre en modo de pantalla completa.

También puedes usar un elemento Video, y de hecho hicimos un post completo sobre video de fondo con CMS aquí por si quieres más detalle sobre cómo añadirlo a tus collection lists. Tanto los iframes como los elementos Video tienen sus pros y sus contras.

Los iframes son una forma habitual de incrustar videos de Vimeo en un sitio web, y ofrecen algunas ventajas. Una de las principales es que los iframes se cargan de forma asíncrona, lo que significa que el resto de la página puede cargarse de forma independiente del video. Esto puede ayudar a mejorar los tiempos de carga, sobre todo con conexiones lentas. Sin embargo, los iframes también pueden tardar más en renderizarse y perjudicar el rendimiento del sitio, sobre todo si cargas muchos videos de forma asíncrona y usas disparadores de interacción como "page loaded", en especial en móviles con procesadores más lentos.

Por otro lado, los videos incrustados con un elemento video pueden rendir mejor que los iframes porque forman parte del DOM de la página y se pueden controlar más directamente con JavaScript, además de ser fáciles de guardar en caché. Esto significa que se pueden optimizar para una reproducción más rápida y un mejor rendimiento, sobre todo en móviles. Sin embargo, también pueden ser más complejos de configurar y requerir más código para controlarlos, y a diferencia de un iframe de Vimeo, no basta con rellenarlos con el ID del video de Vimeo.

Al final nos quedamos con el iframe porque su community manager sería quien mantendría el sitio, y lo único que necesitaría era el ID del video de Vimeo y el CMS de Webflow. Pero necesitábamos más control para optimizar la experiencia: primero, porque aunque podemos hacer recomendaciones sobre tamaño y calidad, no hay garantía de que alguien las siga, y segundo, porque algunas de las páginas de sus directores contenían cientos de videos de fondo que saturarían fácilmente el navegador en un equipo modesto o en un smartphone.

La solución: el código de intersección de objetos (Object Intersect). ¿Qué es eso?, dirás, y con razón. Se usa mucho, pero no es algo de lo que tengan que preocuparse demasiado quienes trabajan con desarrollo no-code. Siempre decimos que Milk Moon Studio es ante todo un estudio Webflow, nos gusta el low-code o no-code y, además, cualquier experto en Webflow prefiere mantener las cosas simples.

El código de intersección de objetos es una técnica de desarrollo web que se usa para disparar acciones cuando un objeto concreto se cruza o entra en la vista de la pantalla.

Diagrama de un viewport: el contenedor de vídeo de Vimeo que está dentro se carga y los dos contenedores de fuera no tienen src y no se cargan

En el contexto de los videos de fondo de Vimeo en Webflow, el código de intersección de objetos sirve para controlar la reproducción del video. Por ejemplo, puedes querer que el video se pause cuando sale de la vista, o que solo empiece a reproducirse cuando entra en pantalla.

Al usar código de intersección de objetos, puedes asegurarte de que la reproducción esté optimizada para tus usuarios y no consuma recursos innecesarios de su dispositivo. También puede mejorar la experiencia general del usuario, haciendo que la reproducción sea más fluida y más receptiva.

El código de intersección de objetos solo te dice qué hay en pantalla, pero combinado con la API del reproductor de Vimeo, que sí sabe si el video se está reproduciendo o está en pausa, puedes disparar otros eventos en el sitio según el estado del reproductor. Por ejemplo, puedes usar la API del reproductor para detectar si el video se está reproduciendo o está en pausa, y luego disparar otras acciones según ese estado, como mostrar u ocultar otros elementos de la página o lanzar animaciones.

Vamos a mostrarte algunas formas en que usamos el código de intersección de objetos en este proyecto para optimizar el sitio y controlar otros elementos, y así mejorar la experiencia general del usuario.

Recuerda que necesitas cargar la API del reproductor para que todo esto funcione:

Usar la API del reproductor de Vimeo como disparador cuando un video de Vimeo empieza a reproducirse

Empezaremos con lo que hicimos en la página de inicio del sitio: usar la API del reproductor de Vimeo para controlar otros elementos, mejorar la experiencia del usuario y sincronizar las interacciones con el momento en que el video empieza a reproducirse.

Para situarte: tenemos un video de showreel de fondo reproduciéndose detrás de un logo que se desplaza. Normalmente es bastante fácil sincronizar esto: disparas la interacción al cargar la página y listo. Pero Webflow no sabe cuándo se ha cargado el video, porque los iframes se cargan de forma asíncrona, así que necesitábamos la API del reproductor de Vimeo para vigilar cuándo se reproduce el video y entonces disparar el logo que se desplaza. El código crea un efecto de marquesina con desplazamiento en una página web usando una animación CSS, y dispara la animación cuando se reproduce un video de Vimeo. Este es el desglose de lo que hace el código:

El código CSS define una clase "marquee-track" que posiciona un elemento de texto de forma absoluta y lo hace desplazarse horizontalmente con una animación CSS. La animación se reproduce en sentido inverso y dura 30 segundos. La clase tiene inicialmente una opacidad de 0, para que esté oculta en la página.
El código JavaScript configura un event listener que espera a que se reproduzca el reproductor de Vimeo. Cuando se dispara el evento play, el JavaScript añade la clase "start" al elemento "marquee-track", lo que dispara la animación CSS y hace que el texto se desplace por la página.

Aquí tienes los estilos completos y el script con el marcado para explicarlo un poco mejor, pero lo esencial de todo esto es lo fácil que resulta usar los eventos del reproductor de Vimeo, junto con el observador de intersección, para disparar, ocultar o mostrar otros elementos, como los loaders y demás.

Cargar de forma diferida los videos de fondo de Vimeo cuando están en el viewport con el observador de intersección

Como dijimos antes, lo anterior aporta más a la experiencia del usuario y queda bonito, pero no hace mucho por el rendimiento. Lo siguiente es excelente para mejorar el rendimiento, y es lo que usamos en las páginas con cientos de videos para mejorar el rendimiento general y los tiempos de carga. Uno de los contras de los iframes es la falta de control directo cuando solo usas el código de incrustación, así que el código de abajo te da control directo sobre cuándo empieza siquiera a cargarse el video:

El código HTML crea un contenedor de video con el ID "vimeo-video". Ahí es donde se cargará el video de Vimeo en la página. Básicamente es lo mismo que el iframe de arriba, pero con un ID distinto.
El código JavaScript selecciona todos los contenedores de video de la página con el método "querySelectorAll".
El objeto "options" configura los parámetros de la API IntersectionObserver. La propiedad "root" está en "null" para usar el viewport como elemento raíz. La propiedad "rootMargin" está en "0px" para que el margen alrededor del elemento raíz sea 0. La propiedad "threshold" está en 0.3 para indicar la proporción (30%) del contenedor de video que debe ser visible en el viewport antes de que el video empiece a cargarse.
La variable "videoObserver" crea una nueva instancia de IntersectionObserver con una función callback que se ejecuta cuando se observa una intersección. La función recibe un array de "entries" y un objeto "observer". Para cada entrada, la función comprueba si la entrada intersecta con el viewport mediante la propiedad "isIntersecting". Si es así, la función obtiene el iframe de Vimeo dentro del contenedor con el método "querySelector", recupera la URL de origen del video del atributo "data-src" con el método "getAttribute", asigna esa URL al atributo "src" del iframe con el método "setAttribute" y deja de observar el contenedor con el método "unobserve".
La variable "videoContainers" se recorre con el método "forEach" para acceder a cada contenedor por separado. Para cada contenedor, la función obtiene el iframe de Vimeo dentro del contenedor con el método "querySelector", recupera la URL de origen del video del atributo "src" con el método "getAttribute", asigna esa URL al atributo "data-src" con el método "setAttribute", elimina el atributo "src" con el método "removeAttribute" y empieza a observar el contenedor con el método "observe" de la API IntersectionObserver.

Lo genial es que básicamente quitas y vuelves a poner la URL del src, lo que significa que los videos que no están en el viewport no pueden cargarse en absoluto, liberando recursos solo para los que sí lo están.

Usar el reproductor de Vimeo para pausar los videos de Vimeo al cerrar un modal

Este último lo voy a incluir aquí sin más. Es una forma útil de controlar la API del reproductor, sin relación directa con el intersection observer. El problema: ¿qué haces cuando tienes un video de Vimeo en un modal? Al reproducirlo todo va bien, pero si simplemente cierras el modal, el video sigue reproduciéndose, ¿verdad? No es un elemento Video de Webflow, sino una incrustación normal de Vimeo, así que Webflow no tiene control sobre él. Y esto es justo lo que nos pasó cuando teníamos un modal dentro de un slider. Haces clic en una diapositiva, se abre el modal, pero al cerrarlo el slider sigue avanzando y el video también, en algún lugar en segundo plano. Nadie quiere eso.

Todo lo que necesitábamos para pausar el video era esto:

El código HTML crea un modal de video con un botón de cierre. Ahí es donde se reproducirá el video de Vimeo en la página.
El código JavaScript selecciona todos los botones de cierre de la página con el método "querySelectorAll".
La variable "closeButtons" se recorre con el método "forEach" para acceder a cada botón por separado. Para cada botón, la función añade un event listener de clic con el método "addEventListener".
La función del event listener obtiene todos los modales de video de la página con el método "querySelectorAll" y el selector de clase ".modal-video".
La variable "modalVideos" se recorre con el método "forEach" para acceder a cada modal de video por separado. Para cada modal de video, la función obtiene el iframe de Vimeo dentro del modal con la propiedad "contentWindow", que da acceso al objeto window del iframe, y el método "postMessage". El método "postMessage" envía un mensaje al iframe, que en este caso es un objeto JSON con una propiedad "method" con el valor "pause". Esto pausa el video de Vimeo cuando se cierra el modal.

En conjunto, este código asegura que el video de Vimeo dentro del modal se pause al cerrarlo, usando el método "postMessage" para enviar al iframe un mensaje con el método "pause". Así se evita que el video siga reproduciéndose en segundo plano y consumiendo recursos innecesarios de la página.

Si prefieres prescindir del iframe por completo, también escribimos sobre videos de fondo con CMS usando el Custom Element, que te da un elemento video HTML5 nativo. Y si buscas más velocidad de página en general, echa un vistazo a por qué la velocidad de página impulsa el éxito de un negocio y a nuestra guía del proxy de assets y la optimización con Cloudflare.

Preguntas frecuentes sobre los videos de Vimeo en Webflow

¿Cómo añado un video de Vimeo a Webflow?

Coloca un elemento Embed en la página y pega un iframe de Vimeo con el ID de tu video en el src, o usa el propio elemento Video de Webflow y dale el enlace de Vimeo. Para un video de fondo preferimos el iframe, porque te permite añadir parámetros al src, y en eso se basa el resto de este post.

¿Cómo hago que un video de Vimeo se reproduzca como video de fondo?

Añade el parámetro "background=1" al final del src del video. Según Vimeo, esto desactiva los controles del reproductor, repite el video en bucle, lo reproduce automáticamente y lo silencia. Ten en cuenta que Vimeo indica que el video debe estar alojado en una cuenta Starter o superior, así que una cuenta gratuita no sirve.

¿Cómo cargo de forma diferida los videos de fondo de Vimeo en Webflow?

Cambia el "src" del iframe por un "data-src" y deja que un Intersection Observer vuelva a poner el src cuando el contenedor sea visible en un 30% aproximadamente. Los videos que están lejos del viewport nunca llegan a cargarse, y eso fue lo que nos salvó en las páginas con cientos de ellos.

¿Cómo pauso un video de Vimeo cuando se cierra un modal?

Envía al iframe de Vimeo un mensaje "pause" con postMessage cuando se haga clic en tu botón de cierre, exactamente como en el CodePen de arriba. Webflow no puede detener por ti una incrustación normal de Vimeo, así que tienes que decírselo tú mismo al reproductor.

En resumen, algunas formas interesantes de usar el intersection observer para optimizar el contenido de video de fondo en Webflow, además de cómo pausar un video al cerrar un modal. Esperamos que te sirva de inspiración para tu próximo proyecto, y para saber más sobre los videos de fondo con CMS, echa un vistazo a este post. También puedes encontrar nuestra sección de tutoriales aquí con todos los posts y videos prácticos que hemos creado; intentamos que sea low-code, simple y relacionado con Webflow. Además, hay una buena guía sobre el intersection observer aquí, con un buen video por si quieres usarlo para cosas que no sean video.