Aggiungi YouTube al tuo popup video in Webflow

Il tuo popup video custom ora può riprodurre anche i video di YouTube, non solo Vimeo — e passare dall’uno all’altro è quasi immediato. Questo è un piccolo aggiornamento al popup video custom che abbiamo costruito insieme: stesso componente, stessa configurazione, solo un trucco nuovo per prendere l’URL giusto di YouTube. Se non hai ancora fatto la build originale, parti da lì e poi torna qui.

L’unico intoppo con YouTube è che non puoi semplicemente copiare il link dalla barra degli indirizzi o dal pulsante Condividi — ti serve il vero URL embed, più un minuscolo parametro nella query che permette al nostro codice di controllare il player. Fai bene questo e tutto si comporta esattamente come con Vimeo: si apre, parte e va in pausa quando lo chiudi.

Come bonus, c’è una proprietà nuova di zecca per ricolorare l’icona play sul trigger, così può abbinarsi a qualsiasi palette stia usando la tua pagina.

Come funziona

Del popup in sé non cambia nulla. Il componente legge ancora la stessa proprietà video link che hai configurato l’altra volta — l’unica differenza è cosa ci metti dentro. Per Vimeo incollavi un URL Vimeo; per YouTube incolli un URL embed di YouTube. Stesso campo, stesso componente, e i due possono tranquillamente convivere nella stessa pagina (un popup su Vimeo, un altro su YouTube) senza alcun conflitto.

Il motivo per cui un link YouTube normale non funziona è che è un link di visualizzazione, pensato per il browser, non per un iframe. Il vero URL embed di YouTube sta dietro Condividi > Incorpora — e anche lì non ti serve tutta la stringa. Copi solo il src, la parte che va da https fino al punto interrogativo, e la incolli nella proprietà video link.

Un ultimo pezzo fa la magia: ?enablejsapi=1 aggiunto in fondo a quell’URL. Questo attiva le API IFrame (JavaScript) di YouTube, ed è ciò che permette al codice del popup di riprodurre e mettere in pausa il video via codice — così parte all’apertura del popup e si ferma alla chiusura, esattamente come con Vimeo. Salta quel parametro e il video si carica lo stesso, ma il popup perde quel controllo.

L’altra novità è una proprietà per il colore dell’icona play. Accetta qualsiasi formato di colore CSS — un nome come white (il default), un valore esadecimale come #111 o un valore rgb() — così il pulsante play sul tuo trigger può abbinarsi al tuo brand invece di essere sempre bianco.

Come si usa

1. Parti dalla build esistente. Questo aggiornamento presuppone che il componente popup video sia già nella tua pagina. Se non c’è, costruisci prima l’originale — puoi clonare tutto il progetto qui sotto.

2. Prendi l’URL embed di YouTube. Apri il video di YouTube, clicca Condividi, poi clicca Incorpora (non Copia). Nel codice embed copia solo il valore src — la parte da https fino al punto interrogativo.

3. Abilita le JS API. Incolla quell’URL nella stessa proprietà video link del tuo popup, poi aggiungi ?enablejsapi=1 in fondo così il popup può controllare la riproduzione.

4. Pubblica e prova. Apri il link live e attiva il popup — il video di YouTube parte, e chiudendolo il video si ferma. Eventuali popup Vimeo nella pagina continuano a funzionare come prima.

5. Ricolora l’icona play (opzionale). Imposta la proprietà del colore dell’icona play su qualsiasi colore CSS — un nome, un esadecimale come #111 o un valore rgb() — poi ripubblica per vedere l’icona del trigger aggiornarsi.