Vai al contenuto principale

Come aprire un video di YouTube in un popup su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Vuoi scoprire come aprire un video 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 

Gli 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 attivo (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).

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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 ").

apri un video Youtube in un popup - define-les-regalges

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] (per YouTube)
[video_lightbox_vimeo5] (Per 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 = 0larghezza = "640altezza = "480anchor = "Uno video semplice " descrizione = "Di Dr. WP "]

Per un risultato simile

presentazione-per-i risultati

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

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0larghezza = "640altezza = "480auto_thumb = "1descrizione = "Di Dr. WP "]

Per un risultato identico a questo

mini-duna-video

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 faticato a gestire migliaia di file di immagini, video o documenti che hai caricato sul tuo FTP di WordPress? sì o no, qualunque cosa, l'importante è sapere che il plugin FileBird di WordPress ti aiuterà a gestire i tuoi file multimediali con facilità e porterà più potenza alla tua libreria.FileBird

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 plugin FileBird WordPress potrebbe essere la tua arma segreta.

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

Plugin WordPress per Social Share Locker Pro

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

Questa estensione WordPress del plug-in Contact Form 7 offre una funzionalità per aggiungere facilmente suggerimenti al plug-in Contact Form 7. I suoi suggerimenti verranno visualizzati quando si passa con il mouse sull'elemento di destinazione. Sui dispositivi mobili, le descrizioni comandi indicano quando l'elemento target è impegnato.Modulo di contatto 7 Tooltips

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.

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 il suggerimento con i tuoi amici sui tuoi social network.

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.

...

Questo articolo contiene i commenti 7

  1. Buongiorno,
    Sto cercando un modo per visualizzare un popup video dopo un clic di un pulsante. È possibile farlo con WP Video Lightbox?

    grazie,
    Cordiali saluti,

  2. Buongiorno,
    Grazie mille per questo tutorial ben costruito, volevo sapere se fosse possibile aggiungere video da altre piattaforme diverse da You Tube e Vimeo (esempio Openload) o se ci sarebbe stato un limite.

    Cordiali saluti

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
7 azioni
quota5
Tweet
Enregistrer2