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 moduli di registrazione. 

Ma sapevi che può essere utilizzato anche per visualizzare video su WordPress ? Non? 

Non preoccuparti, 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 

Le lightbox sono finestre modali; tuttavia, ciò che potresti non sapere è che non tutte le immagini visualizzate in esse vengono caricate durante l'intero processo. "caricamento" pagina. 

Le Navigateur carica i immagini quando il lightbox Lo stesso vale per i video quando si apre. 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 oppure scaricalo come un file .zip.

Per maggiori dettagli, Dai un'occhiata alla nostra guida passo passo su come installare un plugin di 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 « Consentire a tutti prettyphoto »). Per far sapere agli utenti che sono sulla stessa pagina, puoi rendere la finestra trasparente. (définir un valore da 0 a 1. I valori di virgola sono accettati).

Scopri le Le caratteristiche di un popup efficace per WordPress 

Tutti i tuoi lightbox possono avere un titolo che può essere visualizzato (Show 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 permetterà di visualizzare lightbox negli articoli. Ho dimenticato di dire che puoi anche vedere 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

Dimostrazione di un caso d'uso

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 utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

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

1. FileBird

Hai mai avuto difficoltà a gestire migliaia di file di immagini, video o documenti caricati sul tuo FTP WordPress? Sì o no, non importa; la cosa importante è sapere che il plugin FileBird per WordPress ti aiuterà a gestire i tuoi file multimediali con facilità e ad aumentare le potenzialità della 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 WooCommerce, e supporta anche un gran numero di lingue. Quindi, se vuoi dare una spinta alla gestione della tua libreria multimediale, il plugin FileBird per WordPress potrebbe essere la tua arma segreta.

Scaricare | Demo | Web hosting

2. Social Share & Locker Pro

L'estensione Social Share & Locker Pro è stata progettata per aiutare il tuo sito web ad aumentare la visibilità sui social media. In pochi clic, puoi definire la posizione delle tue icone social o bloccare i tuoi contenuti, richiedendone la condivisione su uno dei social network selezionati.

Hai 10 modelli tra cui scegliere, che dovrebbero soddisfare le esigenze più comuni. Tutti questi modelli sono eccellenti e funzionano perfettamente. Inoltre, con Social Share & Locker Pro, puoi visualizzare il nome completo dei social network o solo l'icona. Questo dipenderà dal tuo design, dallo spazio disponibile o dalle tue preferenze personali.

Scaricare | Demo | Web hosting

3. Modulo di contatto 7 Tooltips

Questa estensione WordPress per il plugin Contact Form 7 aggiunge una semplice funzionalità di tooltip. Questi tooltip appariranno quando si passa il mouse sopra l'elemento di destinazione. Sui dispositivi mobili, i tooltip indicano quando si interagisce con l'elemento di destinazione.

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.

Scaricare | 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... 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.

...