Popup Video Custom in Webflow (No Code, Autoplay)

Costruisci un popup video custom in Webflow che semplicemente funziona: clicchi un trigger e compare in dissolvenza con il video già in riproduzione, clicchi fuori dal video (o sul pulsante di chiusura) e sparisce in dissolvenza mettendosi in pausa. Senza scrivere codice — tutto è guidato da una manciata di attributi custom, quindi configuri ogni cosa direttamente dal pannello impostazioni di Webflow.

E va oltre il singolo popup. Puoi aggiungere tutti i trigger di apertura che vuoi, far girare più popup diversi nella stessa pagina, impostare easing e durata della dissolvenza, poi trasformare il tutto in un componente e collegarlo al CMS — così ogni progetto o elemento della collezione mostra il suo video e la sua thumbnail.

La parte più bella è quanto poco devi pensarci. I nomi delle tue classi e la convenzione di naming sono del tutto irrilevanti; lo script guarda solo gli attributi. Etichetta i pezzi, inserisci il tuo link Vimeo, e hai finito.

Come funziona

Il popup è un unico elemento overlay che porta fc-video-popup="component". È position: fixed, copre tutto il viewport, sta a uno z-index alto e parte con display: none così resta nascosto finché non viene attivato. Due attributi opzionali regolano l’animazione: easing imposta la curva della dissolvenza (default ease) e duration ne imposta la durata in millisecondi (default 300). Nessuno dei due è obbligatorio — ometti entrambi e partono i default sensati.

Dentro l’overlay, lo stesso nome di attributo fa ogni lavoro — cambia solo il valore. Un overlay di chiusura a tutto schermo sta dietro il video con fc-video-popup="close", e il vero pulsante di chiusura porta lo stesso valore, così un click ovunque fuori dal video chiude il popup. Il pulsante play custom (che compare in dissolvenza se metti il video in pausa) riceve fc-video-popup="play". E qualsiasi elemento della pagina con cui vuoi aprire il popup — un link block, un pulsante, quello che vuoi — riceve fc-video-popup="open". Questo è tutto il modello mentale: un attributo, quattro ruoli.

Il video vero e proprio è un custom element di Webflow con il tag cambiato in iframe (imposta il tag su iframe nelle impostazioni dell’elemento). Il suo src è il valore più importante di tutto il setup, e per ora la soluzione è pensata per Vimeo: apri il video su Vimeo, premi Share, apri il tag di embed e copia il link fino al primo punto interrogativo. Quell’URL tagliato è ciò che va in src. L’iframe tiene anche un attributo frameborder e uno allow — non serve capire il valore di allow, lascialo com’è così l’embed si comporta bene.

Due tranelli da tenere a mente. Primo, più popup nella stessa pagina: duplica l’overlay e porta il valore a component-2, component-3, e così via, collegando ogni trigger con open — ma lo script embed definisce variabili condivise, quindi uno script duplicato entra in conflitto con sé stesso. Tieni esattamente uno script nella pagina ed elimina gli altri. Secondo, una volta che ne fai un componente, esponi i pezzi che vuoi variare — il nome del componente (il valore di fc-video-popup), easing, duration, l’src dell’iframe, la thumbnail e la visibilità dello script — come proprietà del componente, poi nascondi gli script extra tramite quella proprietà di visibilità quando piazzi più di un’istanza.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow — arriva con struttura completa, stile e lo script del popup commentato, più un riferimento agli attributi in fondo alla pagina. È costruito sul template gratuito ScrollVibe.

2. Puntalo al tuo video. Seleziona l’iframe dentro il wrapper e imposta il suo src sull’URL di embed Vimeo — copia il link dal tag di embed di Vimeo e taglialo subito prima del primo ?.

3. Aggiungi un trigger. Su qualsiasi elemento che deve aprire il popup, aggiungi fc-video-popup="open". Puoi metterlo su quanti elementi vuoi; apriranno tutti lo stesso popup.

4. Regola l’animazione (opzionale). Sull’overlay del popup, aggiungi easing con un valore dal riferimento MDN easing-function e/o duration in millisecondi. Omettili e ottieni ease a 300ms.

5. Aggiungi altri popup nella pagina. Duplica l’overlay, cambia il valore in component-2 (poi component-3…), dai al suo trigger fc-video-popup="open", e sostituisci sorgente video e thumbnail. Poi elimina ogni script del popup tranne l’ultimo così non vanno in conflitto.

6. Trasformalo in componente + CMS. Fai click destro sull’overlay e crea un componente. Esponi come proprietà il nome del componente, easing, duration, l’src dell’iframe, la thumbnail e la visibilità dello script. Per guidarlo dal CMS, collega il link al video a un campo plain text (non un campo link) e la thumbnail a un campo immagine — pubblica, e ogni elemento mostra il suo video.