YouTube Video Showcase - Slider responsive, player in lightbox e miniature automatiche

I tuoi video esistono già. Portali nel negozio.

Dimostrazioni di prodotto, unboxing, tutorial, video istituzionali: il lavoro è fatto e i video sono già su YouTube. Quello che di solito manca è un modo decente per mostrarli in vetrina — senza caricare le miniature a mano, senza spedire il cliente su YouTube a metà visita e senza trascinare una libreria di slider e una copia di jQuery su ogni pagina.

Incolla un link. La configurazione finisce qui.

Copia qualsiasi indirizzo YouTube — dalla barra del browser o dal pulsante Condividi — dai un titolo al video, incolla il link e salva. Appena il link viene riconosciuto, il modulo Aggiungi un video ti mostra la miniatura presa direttamente da YouTube e un segno di spunta verde con l'ID del video riconosciuto, così vedi che il link è stato interpretato correttamente prima ancora di confermare. Nessun caricamento immagini e nessuna chiave API.

Sono accettati tutti i formati di link: youtube.com/watch?v=…, la forma breve youtu.be/…, gli Shorts, i link embed, i link live e perfino il semplice ID video di 11 caratteri. Non sono accettati i link a playlist o a canale, perché nessuno dei due identifica un singolo video — e il modulo te lo dice, invece di salvare qualcosa di rotto.

Il video si riproduce sulla tua pagina, non su quella di YouTube

Un clic sulla miniatura apre il video in un lightbox senza distrazioni sopra il tuo negozio, che si chiude con un clic o con il tasto Esc. Viene usato il player no-cookie a privacy avanzata di YouTube: chi non avvia nessun video non viene tracciato da esso.

Uno slider che se la cava da solo sugli schermi piccoli

Scegli quanti video stanno su una riga da desktop: da uno a otto. Quel numero è un massimo, non una quantità fissa: sotto i 992 px il modulo lo limita a quattro, sotto i 768 px a tre e sotto i 576 px a due, con scorrimento touch nativo. Non devi configurare nessun breakpoint e non ti ritrovi otto francobolli in fila sul telefono.

Le frecce e i punti di navigazione sono opzionali ed entrambi spariscono da soli quando tutti i video stanno già a schermo: niente frecce inutili accanto a uno slider che non ha nulla da far scorrere.

Una riproduzione automatica che sa quando fermarsi

La riproduzione automatica scorre i video secondo l'intervallo che imposti e si mette in pausa quando serve: mentre il mouse del visitatore è sopra lo slider, mentre un video è davvero in riproduzione nel lightbox e mentre la scheda del browser è in secondo piano. Uno slider che continua ad avanzare dietro al video che qualcuno sta guardando è peggio di nessuna riproduzione automatica.

Un elenco video che si gestisce davvero

L'elenco I tuoi video ti dà le frecce su e giù per l'ordinamento, un badge Visibile su cui cliccare per nascondere o mostrare un video, e le azioni di modifica ed eliminazione su ogni riga. Ogni video può essere limitato a una sola lingua del negozio oppure mostrato a tutti — comodo quando il tutorial in tedesco non deve comparire sulla vetrina francese. Un video la cui lingua è stata nel frattempo rimossa dal negozio viene contrassegnato come Lingua eliminata e nascosto, invece di sparire in silenzio senza spiegazioni.

Talmente leggero da non pesare

Un piccolo file CSS e un piccolo file JavaScript, caricati solo quando c'è qualcosa da mostrare. Nessun jQuery, niente slick, niente colorbox, nulla scaricato da una CDN. Le risorse del front office hanno il cache-busting sulla versione del modulo, così un aggiornamento raggiunge i visitatori di ritorno senza chiedere a nessuno di svuotare la cache.

Ogni slide è un vero link al video, che poi lo JavaScript trasforma in lightbox: se il JavaScript non funziona o è disattivato, le miniature restano normali link invece di diventare immagini morte.

Mettilo dove vuoi tu

Per impostazione predefinita lo slider compare in homepage tramite displayHome. Spostalo o copialo su qualsiasi altro hook di visualizzazione da Design → Posizioni, oppure inseriscilo direttamente in un template del tema con {widget name='youtubeslider'}.

Che cosa hanno corretto le versioni 2.0.x

La versione 1.x caricava jQuery due volte da una CDN, la sua pagina di configurazione andava in errore sulle versioni moderne di PrestaShop, ricaricare la pagina dopo un salvataggio duplicava i video e un URL vuoto produceva una slide grigia difettosa. Tutto questo è sparito per costruzione: il modulo non usa più jQuery, ogni salvataggio viene validato e reindirizzato e un video non può essere salvato senza un link YouTube valido.

La linea 2.0.x ha poi risolto tre problemi reali di tema: lo slider che occupava l'intera larghezza del browser sulle zone home a tutto schermo come quelle di Hummingbird (ora limitato alla larghezza dei contenuti del tema e centrato), la barra di scorrimento orizzontale causata dalla freccia successiva e un overflow su mobile nelle zone hook in CSS Grid, dove il contenitore si dimensionava sul proprio contenuto anziché sul viewport. La versione 2.0.2 ha inoltre corretto un aggiornamento che poteva disattivare il modulo quando la registrazione di un singolo hook restituiva false.

Compatibilità

PrestaShop 1.7, 8 e 9, in otto lingue: francese, inglese, italiano, olandese, polacco, spagnolo, tedesco e turco. Funziona con qualsiasi tema, senza jQuery e senza librerie esterne. L'aggiornamento dalla 1.x migra i tuoi video automaticamente: gli ID vengono estratti dagli URL salvati e ogni vecchia slide priva di un URL valido viene conservata ma contrassegnata come Nascosto, così puoi sistemarla invece di perderla. La disinstallazione rimuove la tabella e le impostazioni del modulo; i tuoi video su YouTube restano ovviamente intatti.

Domande frequenti

Mi serve una chiave API di YouTube?

No. Le miniature arrivano direttamente dagli indirizzi immagine di YouTube: non c'è nulla da registrare e nessuna quota da esaurire.

Quali formati di link funzionano?

Tutti quelli abituali: watch?v=, youtu.be, gli Shorts, i link embed e live, oppure il semplice ID video. I link a playlist e a canale non funzionano, perché non identificano un singolo video.

Il visitatore deve uscire dal negozio per guardare?

No. Il video si apre in un lightbox sopra la tua pagina, sul player no-cookie di YouTube, e si chiude con un clic o con il tasto Esc.

Come si comporta su un telefono?

Riduce da solo i video per riga — al massimo quattro sotto i 992 px, tre sotto i 768 px e due sotto i 576 px — e supporta lo scorrimento touch nativo. La tua impostazione è il massimo da desktop; non c'è nessun breakpoint da configurare.

Posso mostrare video diversi in lingue diverse?

Sì. Ogni video è limitato a una sola lingua del negozio oppure mostrato a tutte.

La mia miniatura è un segnaposto grigio. È l'immagine che YouTube restituisce per un video privato, eliminato o appena caricato. Verifica che il video sia pubblico e raggiungibile.

Un video non si riproduce nel lightbox. Il suo proprietario ha disattivato l'incorporamento su YouTube. È una limitazione lato YouTube e in questi casi il lightbox mostra il messaggio di YouTube stesso.

Posso spostare lo slider fuori dalla homepage?

Sì, da Design → Posizioni su qualsiasi hook di visualizzazione, oppure con {widget name='youtubeslider'} ovunque nel tuo tema.