Optimización del vídeo de fondo de Vimeo en Webflow

January 25, 2024

· 11 min

En esta publicación, analizaremos los vídeos de fondo de Vimeo en Webflow y optimizaremos su rendimiento mediante código de intersección de objetos. Explicaremos cómo se puede usar el código de intersección de objetos para controlar la reproducción del vídeo y activar acciones cuando el vídeo aparezca en pantalla, y proporcionaremos ejemplos del uso del código de intersección de objetos para mejorar la experiencia del usuario, controlar la carga de los vídeos y pausar los vídeos en modos modales.

Recientemente se nos ha encomendado la tarea de diseñar y construir un nuevo sitio para una empresa de producción de vídeo, y con ello ha surgido el uso a gran escala del vídeo de fondo. Al final, optamos por los vídeos de fondo de Vimeo en lugar de los vídeos de fondo de Webflow o por proveedores externos. Los proveedores externos estaban fuera porque ya tenían un servicio para esto, pero el rendimiento era... meh. El vídeo de fondo de Webflow salió porque:

Es demasiado difícil de cambiar para el cliente.
Debe ser fácil de administrar, es decir, el CMS y el video de fondo de Webflow y el CMS no funcionan.
Ya tenían una cuenta de Vimeo Pro con un par de cientos de TVC, etc., que podíamos importar al CMS de Webflow con sus metadatos, todas las descripciones, títulos, etc.

El vídeo de fondo de Vimeo es sorprendentemente fácil de implementar en Webflow:

Pero todo lo que necesitas hacer es que el src añada el identificador de vimeo y la consulta que lo sigue para que se reproduzca, se repita y se silencie. Aquí tienes una explicación más detallada del resto si quieres saber exactamente qué está pasando:

El código HTML crea un elemento iframe con el identificador «vimeo-video». Aquí es donde se insertará el vídeo de Vimeo en la página. Esto es importante, ya que nuestro primer observador que observe una intersección de objetos buscará «vimeo-vídeo».
El atributo «loading» se establece en «ansioso», lo que indica al navegador que cargue el iframe y su contenido lo antes posible, sin esperar a que se cargue el resto de la página. Está en la mitad superior de la página, así que queremos que sea rápido.
El atributo «preload» se establece en «auto», lo que indica al navegador que precargue el archivo de vídeo para que pueda empezar a reproducirse lo antes posible. Igual que el anterior.
El atributo «title» establece el título del iframe en «Nombre».
El atributo «src» se establece en la URL del vídeo de Vimeo con parámetros adicionales añadidos. El parámetro «background=1" establece que el vídeo se reproduzca como vídeo de fondo y el parámetro «loop=1" establece que el vídeo se reproduzca en bucle de forma continua. El parámetro «autopause=0" desactiva el comportamiento predeterminado del reproductor de Vimeo de hacer una pausa cuando el vídeo no se ve, y el parámetro «muted=1" establece que el vídeo se reproduzca con el sonido silenciado. El parámetro «quality=auto» establece la calidad del vídeo para que se ajuste automáticamente en función de la velocidad de conexión del usuario. El parámetro «responsive=1" hace que el vídeo responda a diferentes tamaños de pantalla. El parámetro «dnt=1" establece que el reproductor de Vimeo respete la configuración del navegador de «no rastrear» del usuario. Esto acelera los tiempos de carga y ahora no se realiza ningún seguimiento de los análisis.
El atributo «style» establece el color de fondo del iframe en blanco.
Los atributos «width» y «height» están configurados al 100% para que el iframe ocupe todo el ancho y el alto de su contenedor.
El atributo «frameborder» se establece en 0 para eliminar el borde alrededor del iframe.
El atributo «permitir» permite que el iframe se 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 puede utilizar un elemento de vídeo y de hecho, hemos hecho una publicación completa sobre el video de fondo aquí si está interesado en obtener más información sobre cómo agregarlo a sus listas de colecciones. Tanto los iframes como los elementos de vídeo tienen sus ventajas y desventajas.

Las incrustaciones de iframe son una forma común de incrustar vídeos de Vimeo en un sitio web y ofrecen algunas ventajas. Una de las principales ventajas es que los iframes se cargan de forma asincrónica, lo que significa que el resto de la página se puede cargar independientemente del vídeo. Esto puede ayudar a mejorar los tiempos de carga de la página, especialmente en conexiones más lentas. Sin embargo, los iframes también pueden tardar más en renderizarse y pueden afectar negativamente al rendimiento del sitio web, especialmente si cargas muchos vídeos de forma asincrónica y utilizas activadores de interacción como «página cargada», especialmente en dispositivos móviles con procesadores más lentos.

Por otro lado, las incrustaciones de elementos de vídeo pueden tener más rendimiento que los iframes porque forman parte del DOM de la página y se pueden controlar de forma más directa con JavaScript, y también son fáciles de almacenar en caché. Esto significa que las incrustaciones de elementos de vídeo se pueden optimizar para una reproducción más rápida y un mejor rendimiento, especialmente en dispositivos móviles. Sin embargo, también pueden ser más complejas de configurar y requerir más código para controlarlas y, a diferencia de un iframe de Vimeo, solo puedes rellenarlos con el ID de vídeo de Vimeo.

Al final, optamos por el iframe, ya que su administrador de redes sociales se encargaría del mantenimiento del sitio, y todo lo que necesitaba era el ID de vídeo de Vimeo y el CMS Webflow, pero necesitábamos más control para optimizar la experiencia, en primer lugar, porque si bien podemos hacer recomendaciones sobre el tamaño y la calidad, no hay garantía de que alguien las siga y, en segundo lugar, porque algunas de las páginas de sus directores contenían cientos de vídeos de fondo que fácilmente bloquearían el navegador en un máquina de gama baja o smartphone.

La solución, Object Intersect Code. Qué es lo que dices, y con razón. Se usa mucho, pero no es algo por lo que la gente que se dedica al desarrollo sin código deba preocuparse demasiado. Siempre decimos que Milk Moon Studio es en primer lugar un estudio de Webflow, que nos gusta que el código sea bajo o nulo y, de todos modos, a cualquier experto en Webflow le gusta simplificar las cosas.

El código de intersección de objetos es una técnica que se utiliza en el desarrollo web para activar acciones cuando un objeto específico se cruza o aparece en la pantalla.

En el contexto de los vídeos de fondo de Vimeo en Webflow, el código de intersección de objetos se puede utilizar para controlar la reproducción del vídeo. Por ejemplo, es posible que desees que el vídeo se detenga cuando no esté visible o que solo comience a reproducirse cuando aparezca en la pantalla.

Al usar código de intersección de objetos, puedes asegurarte de que la reproducción del vídeo esté optimizada para tus usuarios y no agote innecesariamente los recursos de sus dispositivos. También puede mejorar la experiencia general del usuario al hacer que la reproducción del vídeo sea más fluida y responsiva.

El código de intersección de objetos también se puede usar para activar otros eventos en el sitio en función del estado del reproductor de vídeo de Vimeo. Por ejemplo, puedes usar el código para detectar si el vídeo se está reproduciendo o está en pausa y, a continuación, activar otras acciones en función de ese estado, como mostrar u ocultar otros elementos de la página o activar animaciones.

Te mostraremos algunas formas en las que utilizamos el código de intersección de objetos en este proyecto para ayudar a optimizar el sitio y controlar otros elementos para ayudar a optimizar la experiencia general del usuario.

Solo recuerda que necesitarás cargar la API del reproductor para que todo esto funcione:

Uso del código de intersección de objetos como activador cuando un vídeo de Vimeo comienza a reproducirse

Empezaremos con lo que hicimos en la página principal del sitio: usar código de intersección de objetos para controlar otros elementos a fin de mejorar la experiencia del usuario y el tiempo en que las interacciones con el vídeo comienzan a reproducirse.

Para preparar el escenario, tenemos un vídeo de fondo que se reproduce detrás de un logotipo desplazable. Normalmente, es bastante fácil cronometrar esto, activar la interacción cuando se carga la página y listo, pero Webflow no sabrá cuándo se ha cargado, son los iframes los que se cargan de forma asíncrona, por lo que necesitábamos el código de intersección de objetos para ver cómo se reproducía el vídeo y, a continuación, activar el logotipo desplazable. El código establece un efecto de marco de desplazamiento en una página web mediante animación CSS y activa la animación cuando se reproduce un vídeo de Vimeo. Este es un desglose de lo que hace el código:

El código CSS configura una clase «marquee-track» que posiciona un elemento de texto de forma absoluta y lo configura para que se desplace horizontalmente mediante una animación CSS. La animación está configurada para reproducirse a la inversa y durar 30 segundos. La clase se establece inicialmente para que tenga una opacidad de 0 para que quede oculta en la página.
El código JavaScript configura un detector de eventos que espera a que se reproduzca el reproductor de Vimeo. Cuando se activa el evento de reproducción, JavaScript añade la clase «start» al elemento «marquee-track», lo que activa la animación CSS y hace que el texto se desplace por la página.

Aquí están los estilos completos y el script con marcado para explicarlo un poco mejor, pero eso es lo fácil que es usar el observador de intersecciones de objetos para activar, ocultar o mostrar otros elementos, como cargadores, etc.

Carga vídeos de fondo de Vimeo de forma lenta cuando estén en la ventana gráfica utilizando el observador de intersecciones de objetos

Como dijimos antes, la parte anterior es más buena para la experiencia de usuario, es atractiva, pero no hace mucho en términos de rendimiento. La siguiente es excelente para mejorar el rendimiento y esto es lo que utilizamos en las páginas que tenían cientos de vídeos para mejorar el rendimiento general de la página y los tiempos de carga. Una de las desventajas de los Iframes es la cantidad de control directo que tienen cuando se utiliza el modo de inserción. El código que aparece a continuación te permite controlar directamente cuándo el vídeo empieza a cargarse:

El código HTML crea un contenedor de vídeo con el identificador «vimeo-video». Aquí es donde se cargará el vídeo de Vimeo en la página. Básicamente es el mismo que el iframe de arriba, pero con una ID diferente.
El código JavaScript selecciona todos los contenedores de vídeo de la página mediante el método «querySelectorAll».
El objeto «options» configura los parámetros de la API IntersectionObserver. La propiedad «root» se establece en «null» para usar la ventana gráfica como elemento raíz. La propiedad «rootMargin» se establece en «0px» para establecer el margen alrededor del elemento raíz en 0. La propiedad «threshold» se establece en 0,3 para indicar el porcentaje del contenedor de vídeo que debe estar visible en la ventana gráfica antes de que el vídeo comience a cargarse.
La variable «VideoObserver» crea una nueva instancia de IntersectionObserver con una función de devolución de llamada que se ejecuta cuando se observa una intersección. La función recibe una matriz de «entradas» y un objeto «observador». Para cada entrada, la función comprueba si la entrada se interseca con la ventana gráfica mediante la propiedad «isIntersecting». Si es así, la función obtiene el iframe del vídeo de Vimeo dentro del contenedor mediante el método «querySelector», recupera la URL de origen del vídeo del atributo «data-src» mediante el método «getAttribute», establece el atributo iframe «src» en la URL recuperada mediante el método «setAttribute» y deja de observar el contenedor mediante el método «unobserve».
La variable «videoContainers» se itera mediante el método «forEach» para acceder a cada contenedor de forma individual. Para cada contenedor, la función obtiene el iframe del vídeo de Vimeo dentro del contenedor mediante el método «querySelector», recupera la URL de la fuente del vídeo del atributo «src» mediante el método «getAttribute», establece el atributo «data-src» en la URL recuperada mediante el método «setAttribute», elimina el atributo «src» mediante el método «removeAttribute» y comienza a observar el contenedor con el método «observe» del API IntersectionObserver.

Lo bueno es que básicamente eliminas y añades la URL src, lo que significa que los vídeos que no están en la ventana gráfica no pueden cargarse en absoluto, liberando recursos solo para los que sí lo están.

Usar el reproductor de Vimeo para pausar los vídeos de Vimeo al cerrar un modal

Esta última la voy a dejar aquí. Es solo una forma útil de controlar la API del jugador, no directamente relacionada con la intersección de los observadores. El problema es qué haces cuando tienes un vídeo de Vimeo en modo modal. Cuando lo reproduces, todo va bien, pero si cierras el modal, el vídeo se sigue reproduciendo correctamente, no es un elemento de vídeo de Webflow, solo una incrustación normal de Vimeo, por lo que Webflow no tiene ningún control sobre él. Y esto es exactamente lo que nos pasaba a nosotros cuando teníamos un modal en un slider. Al hacer clic en un lado, se abre el modal, pero cuando lo cierras, el control deslizante sigue funcionando y el vídeo, en algún lugar del fondo. Nadie quiere eso.

Todo lo que necesitábamos era esto para pausar el vídeo:

El código HTML crea un modal de vídeo con un botón de cierre. Aquí es donde se reproducirá el vídeo de Vimeo en la página.
El código JavaScript selecciona todos los botones de cierre de la página mediante el método «querySelectorAll».
La variable «closeButtons» se repite mediante el método «forEach» para acceder a cada botón de forma individual. Para cada botón, la función añade un detector de eventos de clic mediante el método «addEventListener».
La función de escucha de eventos obtiene todos los modales de vídeo de la página mediante el método «querySelectorAll» y el selector de clases «.modal-video».
La variable «modalVideos» se itera utilizando el método «forEach» para acceder a cada modal de vídeo de forma individual. Para cada modal de vídeo, la función coloca el iframe de vídeo de Vimeo dentro del modal mediante la propiedad «contentWindow», que accede 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 de «método» establecida en «pausa». Esto detiene el vídeo de Vimeo cuando se cierra el modal.

En general, este código garantiza que el vídeo de Vimeo dentro del modal se detenga cuando el modal se cierre mediante el método «postMessage» para enviar un mensaje al iframe con el método «pause». Esto evita que el vídeo se reproduzca en segundo plano y consuma recursos innecesarios de la página.

En resumen, algunas formas interesantes de usar el observador de intersecciones de objetos para optimizar el contenido de vídeo en segundo plano en Webflow, además de cómo pausar un vídeo cuando se cierra un modal. Esperamos que esto te sirva de inspiración para tu próximo proyecto, y para obtener más información sobre los vídeos de fondo impulsados por CMS, consulta esta publicación. También puedes encuentra nuestra sección de instrucciones aquí con todas las publicaciones y vídeos instructivos que hemos creado, tratamos de mantener un código bajo, sencillo y Flujo web relacionado. También hay una buena guía para el observador de intersecciones de objetos aquí, con un bonito vídeo si quieres usarlo para otras cosas que no sean vídeos.

Optimización de vídeos de fondo de Vimeo en Webflow mediante código de intersección de objetos para mejorar el rendimiento

Uso del código de intersección de objetos como activador cuando un vídeo de Vimeo comienza a reproducirse

Carga vídeos de fondo de Vimeo de forma lenta cuando estén en la ventana gráfica utilizando el observador de intersecciones de objetos

Usar el reproductor de Vimeo para pausar los vídeos de Vimeo al cerrar un modal

Compartir

Todas las publicaciones

Dance of the Dots: coreografía de controles deslizantes personalizados en Webflow

Impulse su SEO mediante la creación de páginas de destino de flujo web programáticas que se dirijan a su competencia

Uso de Webflow con Cloudflare para almacenar en caché y acelerar tu proyecto de Webflow

Diseño web Rebels Unite. Únase a nuestro boletín.