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 600.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 sai che è possibile usarlo anche per visualizzare i video WordPress ? Non?

Nessun problema, in questo tutorial ti mostrerò come pubblicare 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 si sa è che non tutte le immagini che vengono visualizzate su di essa vengono caricate durante il « caricamento« pagina.

Le Navigateur carica il 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 dettagliata 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 alla scheda " 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 consentire agli utenti di sapere che si trovano sulla stessa pagina, sarai in grado di rendere trasparente la finestra (définir un valore da 0 a 1. I valori di virgola sono accettati).

Scopri Le caratteristiche di un popup efficace per WordPress

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]

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 lettura automatica (spunta la casella " Autoplay ").

define-the-regalges

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 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:

  • Definire l'identificatore (video_id) un video, di solito 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 collega il testo 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 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"  larghezza = "640"  altezza = "480"  anchor = "Uno video semplice " descrizione = "Di Dr. WP "]

Per un risultato simile

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

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 = 0"  larghezza = "640"  altezza = "480"  auto_thumb = "1"  descrizione = "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 avuto problemi a gestire migliaia di file di immagini, video o documenti che hai caricato sul tuo FTP WordPress? sì o no, qualunque cosa, l'importante è sapere che il plugin WordPress FileBird ti aiuterà a gestire i tuoi file multimediali con facilità e porterà 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 sistematicamente organizzati e puoi facilmente selezionare un'immagine da inserire in una pagina o pubblicare lì.

Scopri anche il nostro Plugin 6 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.

Download | Demo | Web hosting

2. Social Share & Locker Pro

L'estensione Social Share & Locker Pro è stata progettata per aiutare il tuo sito Web a essere più visibile sui social network. In 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 proposti.

Hai modelli 10 che dovrebbero coprire i desideri più comuni. Tutti i modelli sono perfetti e fanno miracoli. 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 7 Contact Form fornisce una funzione per aggiungere facilmente descrizioni comandi al plug-in 7 Contact Form. Le relative descrizioni verranno visualizzate quando l'oggetto di destinazione viene sorvolato. Sui dispositivi mobili, le descrizioni comandi indicano quando l'elemento target è attivato.

Le sue caratteristiche principali sono: facilità d'uso, supporto per tutte le versioni di Contact Form 7, personalizzazione del colore di sfondo della descrizione comandi, supporto HTML, layout di pagina intera reattivo e molto altro.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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 possa aiutare a mostrare i video di Youtube o Vimeo in a lightbox sul tuo sito Web WordPress. Non esitare condividi il consiglio 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 intanto 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 per questo tutorial ben costruito, volevo sapere se era possibile aggiungere video da altre piattaforme diverse da YouTube e Vimeo (esempio openload) o se ci sarebbe 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