Vuoi scoprire come aprire un video di YouTube in un popup su WordPress?

La lightbox o finestra modale (pop-up) è una funzionalità molto comune in rete. Tuttavia, viene generalmente utilizzato per visualizzare immagini, moduli di acquisizione e-mail, promozioni o persino moduli di registrazione. 

Ma lo sapevi che è anche possibile utilizzarlo per visualizzare video su WordPress ? Non? 

Nessun problema, in questo tutorial ti mostrerò come visualizzare un video (YouTube – Vimeo – ecc.) dans une lightbox.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

I motivi per cui dovresti usare a lightbox per visualizzare i tuoi video 

I lightbox sono finestre modali, tuttavia, ciò che non sai è che non tutte le immagini visualizzate in esse vengono caricate durante il « caricamento«  pagina. 

Le Navigateur carica i immagini quando il lightbox si apre, questo è anche il caso dei video. In breve, è una caratteristica che consentirà alle tue pagine di aprirsi più velocemente. Ti permetterà anche di ridurre le dimensioni (longueur) Della paginaperché parte del contenuto di questa pagina sarà disponibile in questa finestra modale.

Tregua di chiacchiere, mettiamoci al lavoro.

Come installare e configurare plug-in Lightbox Video WP

Lightbox video WP è un plug-in disponibile su WordPress.org. Ciò significa che puoi installarlo direttamente dalla dashboard di WordPress o scaricalo come un file .zip.

Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo aver attivato il plug-in, vai alla sua pagina delle impostazioni da questa posizione " impostazioni >> Video lightbox '.

Andremo direttamente al " prettyphoto '.

In realtà, questo plug-in usa un altro plug-in, destinato principalmente alla visualizzazione di una galleria fotografica. Ma puoi modificare alcune delle informazioni che verranno applicate ai video.

Per questo, spiegherò alcune opzioni (Obbligatorio)In modo che è come lo si desidera.

Già la libreria prettyphoto deve essere attivato (controlla « permettere prettyphoto »). Per far sapere agli utenti che si trovano sulla stessa pagina, puoi rendere la finestra trasparente (définir un valore da 0 a 1. I valori di virgola sono accettati).

Scopri Le caratteristiche di un popup efficace per WordPress 

Tutti i tuoi lightbox possono avere un titolo che può essere visualizzato (Mostra titolo). A volte per finestre modali di grandi dimensioni è necessario consentire il ridimensionamento (Consentire ridimensionare). E per video più lunghi, gli utenti saranno in grado di ingrandirli (Consentire Espandere), Meglio guardare.

Per la larghezza e l'altezza del lightbox, puoi modificare i campi " difetto larghezza "E" difetto altezza '. 

Per scegliere il tema del lightbox, modifica il menu a discesa tema ". È anche possibile attivare la riproduzione automatica (spunta la casella " Autoplay ").

Come visualizzare a lightbox in un articolo

Le plug-in propone una lista di shortcodes che ti consentirà di visualizzare lightbox negli articoli. Ho dimenticato di dirti che puoi anche visualizzare i video disponibili su Vimeo.

Per visualizzare un video YouTube ou Vimeodevi usare il shortcodes seguenti:

[video_lightbox_youtube] (pour YouTube)
[video_lightbox_vimeo5] (pour Vimeo)

Ognuno di questi shortcodes accetta parametri, che ti permetteranno di:

• Definisci l'identificatore (video_id) di un video, solitamente in questo formato " YzqKMmQ_3Sg '. Esempi [video_lightbox_youtub video_id = "YzqKMmQ_3Sg"]
• Imposta l'altezza del video (altezza)
• Imposta la larghezza del video (larghezza)
• Aggiungere una descrizione (descrizione)
• Aggiungi un ancoraggio HTML (ancora) o il testo del collegamento che aprirà la finestra
• Aggiungi una miniatura (auto_thumb)

Se si imposta un ancoraggio HTML, la miniatura verrà ignorata. In caso contrario, auto_thumb prende il valore " 1 '.

Vai oltre scoprendo anche Come utilizzare e gestire i codici brevi WordPress

Demo di un utilizzo

Con quello che ti ho appena fornito le informazioni, puoi visualizzare un video usando un codice simile a questo:

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0" width="640" height="480" anchor="Une simple vidéo" description="Par Dr WP"]

Per un risultato simile

Puoi visualizzare una miniatura come mostrato sopra con un codice simile a questo.

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0" width="640" height="480" auto_thumb="1" description="Par Dr WP"]

Per un risultato identico a questo

prima di lasciare

Va notato che alcuni parametri nel file shortcodes sovrascriverà quelli definiti nelle impostazioni.

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. FileBird

Hai mai faticato a gestire migliaia di file di immagini, video o documenti che hai caricato sul tuo FTP WordPress? si o no, non importa, l'importante è sapere che il WordPress Plugin FileBird ti aiuterà a gestire i tuoi file multimediali con facilità e darà più potenza alla tua libreria.

La sua interfaccia utente intuitiva e il menu di scelta rapida consentono agli utenti di trascinare e rilasciare i file nelle cartelle o di disporre dei diritti necessari per creare, rinominare o eliminare rapidamente le cartelle nello stesso modo in cui lo si fa sul proprio computer. Con questo plugin in mano, i tuoi file multimediali saranno organizzati sistematicamente e potrai facilmente selezionare un'immagine da inserire in una pagina o pubblicarla.

Scopri anche il nostro 6 plugin WordPress per dare nuova vita ai tuoi articoli

Inoltre, questo plugin è pienamente compatibile con i plugin più popolari, in particolare con WooCommercee supporta anche un gran numero di lingue. Quindi, se vuoi dare una spinta alla gestione della tua libreria multimediale, il WordPress Plugin FileBird potrebbe essere la tua arma segreta.

Download | Demo | Web hosting

2. Social Share & Locker Pro

Il plugin Social Share & Locker Pro è stato progettato per aiutare il tuo sito web ad essere più visibile sui social media. Con pochi clic, puoi impostare la posizione delle tue icone social o bloccare i tuoi contenuti richiedendo la condivisione su uno dei social network da te offerti.

Hai 10 modelli che dovrebbero coprire i desideri più comuni. Tutti i suoi modelli sono perfetti e funzionano meravigliosamente. Inoltre, con Social Share & Locker Pro, sarai in grado di visualizzare il nome completo dei social network o solo l'icona. Dipenderà dal tuo design, dallo spazio disponibile o dai tuoi gusti.

Download | Demo | Web hosting

3. Modulo di contatto 7 Tooltips

questo Estensione di WordPress del plug-in Contact Form 7 offre una semplice funzionalità di descrizione comando al plug-in Contact Form 7. Le sue descrizioni comandi verranno visualizzate quando si passa sopra l'elemento di destinazione. Sui dispositivi mobili, le descrizioni comandi indicano quando l'elemento di destinazione è attivato.

Le sue caratteristiche principali sono: facilità d'uso, supporto per tutte le versioni di Contact Form 7, personalizzazione del colore di sfondo del tooltip, supporto per codice HTML, layout completo reattivo e altro ancora.

Download | Demo | Web hosting

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

• Elementor: come aprire un popup da un URL o un menu
• Come degradare una versione di un plugin per WordPress
• Come trovare uno sponsor e monetizzare il tuo blog? : La guida
• Come personalizzare la dashboard di WordPress per un cliente
• Come creare un menu reattivo per WordPress cellulare

Conclusione

Ecco! Questo è tutto per questo tutorial, spero che ti aiuti a visualizzare i video di Youtube o Vimeo in un file lightbox sul tuo sito Web WordPress. Non esitate a condividi con i tuoi amici sui tuoi social network preferiti. 

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Ma, nel frattempo, parlaci del tuo commentaires e suggerimenti nella sezione dedicata.

...