Treci la conținutul principal

Cum de a deschide un video de pe YouTube într-un pop-up pe WordPress

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Doriți să aflați cum să deschideți un videoclip Youtube într-un popup pe WordPress?

La caseta de lumina sau fereastra modală (pop-up) este o caracteristică foarte comună pe net. Cu toate acestea, este utilizat în general pentru a afișa imagini, formulare de captare prin e-mail, promoții sau chiar formulare de înregistrare. 

Știați că este posibil să-l folosiți și pentru a afișa videoclipuri WordPress ? Nu? 

Nu vă faceți griji, în acest tutorial vă voi arăta cum să afișați un videoclip (Youtube - Vimeo - etc) într-un caseta de lumina.

Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

Motivele pentru care ar trebui să utilizați un lightbox pentru a afișa videoclipurile 

Les caseta de lumina sunt ferestre modale, totuși, ceea ce nu știți este că nu toate imaginile afișate în ele sunt încărcate în timpul « încărcare«  a paginii. 

Le navigator taxă Les imagini atunci când caseta de lumina se deschide, acesta este și cazul videoclipurilor. Pe scurt, este o caracteristică care va permite paginilor dvs. să se deschidă mai repede. De asemenea, vă va permite să reduceți dimensiunea (lungime) din pagina dvs.deoarece o parte din conținutul acestei pagini va fi disponibil în această fereastră modală.

Armășie de vorbăreți, să trecem la treabă.

Cum se instalează și se configurează conecteaza WP Video Lightbox

WP Video Lightbox este a conecteaza disponibil la WordPress.org. Ceea ce înseamnă că îl puteți instala chiar din tabloul de bord WordPress sau descărcați-l ca fișier .zip.

Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre instalarea unui plugin WordPress.

După activarea conecteaza, accesați pagina de setări din această locație " setările >> Video caseta de lumina ".

Vom merge direct la „ prettyPhoto ".

În realitate, asta conecteaza utilizați altul conecteaza, care este destinat în principal pentru afișarea unei galerii foto. Dar puteți modifica unele informații care vor fi aplicate videoclipurilor.

Pentru asta, voi explica câteva opțiuni (Obligatoriu)Astfel că este așa cum doriți.

Deja librăria prettyPhoto trebuie să fie activ (verificați « Permite prettyPhoto »)Pentru a informa utilizatorii că se află pe aceeași pagină, puteți face fereastra transparentă (defini o valoare de la 0 la 1. Valorile virgulei sunt acceptate).

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Descopera Caracteristicile unui pop-up eficient pentru WordPress 

Toate casetele dvs. luminoase pot avea un titlu care poate fi afișat (Spectacol titlu). Uneori, pentru ferestrele modale mari trebuie să permiteți redimensionarea (Permite redimensiona). Și pentru videoclipuri mai lungi, utilizatorii vor putea să le mărească (Permite Extinde), pentru a le urmări mai bine.

Pentru lățimea și înălțimea caseta de lumina, puteți edita câmpurile " lipsă lățime "Și" lipsă înălțime ". 

Pentru a alege tema caseta de lumina, schimbați meniul derulant temă ". De asemenea, este posibil să activați redarea automată (bifează caseta " Redare automata »).

deschideți un videoclip Youtube într-un popup - define-les-regalges

Cum se afișează a caseta de lumina într-un articol

Le conecteaza propune o listă cu Scurtăturile care vă va permite să afișați caseta de lumina în articole. Am uitat să vă spun că puteți vizualiza și videoclipurile disponibile pe Vimeo.

Pentru a vizualiza un videoclip YouTube ou Vimeotrebuie să utilizați Scurtăturile suivant:

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

Fiecare dintre acestea Scurtăturile acceptă parametrii, ceea ce vă va permite:

  • Definiți identificatorul (VIDEO_ID) a unui videoclip, de obicei în acest format " YzqKMmQ_3Sg ". exemplu [video_lightbox_youtub COD_VIDEOCLIP = „YzqKMmQ_3Sg”]
  • Setați înălțimea videoclipului (înălțime)
  • Setați lățimea videoclipului (lățime)
  • Adăugați o descriere (descriere)
  • Adăugați o ancora HTML (ancoră) sau textul linkului care va deschide fereastra
  • Adăugați o miniatură (auto_thumb)

Dacă setați o ancoră HTML, miniatura va fi ignorată. În caz contrar, auto_thumb ia valoarea " 1 ".

Mergeți mai departe descoperind de asemenea Cum se utilizează și se gestionează codurile scurte pe WordPress

Demo de utilizare

Cu ceea ce tocmai v-am furnizat informații, puteți afișa un videoclip folosind un cod similar cu acesta:

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0lățime = "640înălțime = "480ancora = "Unul video simplu " descriere = "By Dr. WP "]

Pentru un rezultat similar

Prezentarea-pentru-rezultate

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

Puteți vedea o miniatură așa cum este arătat mai sus, cu un cod similar cu acesta.

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0lățime = "640înălțime = "480auto_thumb = "1descriere = "By Dr. WP "]

Pentru un rezultat identic cu acesta

miniatură-dună-video de

Înainte de a părăsi

Trebuie remarcat faptul că unii parametri din Scurtăturile va suprascrie pe cele definite în setări.

Descoperiți și câteva plugin-uri premium WordPress  

Puteți utiliza alte plugin-uri WordPress pentru a da un aspect modern și a optimiza aderența blogului sau a site-ului dvs. web.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. FileBird

V-ați străduit vreodată să gestionați mii de fișiere de imagini, video sau documente pe care le-ați încărcat pe WordPress FTP? da sau nu, oricare ar fi, important este să știți că pluginul WordPress FileBird vă va ajuta să vă gestionați fișierele media cu ușurință și să aduceți mai multă putere bibliotecii dvs.FileBird

Interfața sa fără probleme de utilizator și meniul contextual permit utilizatorilor să tragă și să arunce fișiere în foldere sau să aibă drepturile necesare pentru a crea, redenumi sau șterge rapid folderele în același mod ca și în computer. Cu acest plugin în mână, fișierele dvs. media vor fi organizate în mod sistematic și puteți selecta cu ușurință o imagine pe care să o inserați într-o pagină sau să o publicați.

Descoperiți și noi 6 plugin-uri WordPress pentru a da o viață nouă articolelor tale

În plus, acest plugin este complet compatibil cu cele mai populare plugin-uri, în special cu WooCommerceși, de asemenea, acceptă un număr mare de limbi. Așadar, dacă doriți să oferiți un impuls administrării bibliotecii media, pluginul FileBird WordPress ar putea fi arma ta secretă.

DescarcaDemo web hosting

2. Social Share & Locker Pro

Pluginul Social Share & Locker Pro a fost conceput pentru a vă ajuta site-ul să fie mai vizibil pe rețelele de socializare. Cu doar câteva clicuri, puteți fie să setați poziția pictogramelor dvs. sociale, fie să vă blocați conținutul solicitând partajarea pe una dintre rețelele sociale oferite de dvs.

Plugin Social Share Locker Pro WordPress

Aveți 10 șabloane care ar trebui să acopere cele mai comune dorințe. Toate modelele sale sunt perfecte și funcționează minunat. În plus, cu Social Share & Locker Pro, veți putea afișa numele complet al rețelelor sociale sau doar pictograma. Va depinde de designul dvs., de spațiul disponibil sau de gustul dvs.

Descarca | Demo | web hosting

3. Formular de contact 7 Tooltips

Această extensie WordPress a pluginului Formular de contact 7 aduce o caracteristică de a adăuga cu ușurință sfaturi de instrument la pluginul dvs. Formular de contact 7. Sfaturile sale de instrumente vor fi afișate atunci când elementul țintă este plasat. Pe dispozitivele mobile, sfaturile de instrumente indică momentul în care este activat elementul țintă.Formular de contact 7 Scripturi de instrumente

Principalele sale caracteristici sunt: ​​ușurința utilizării, suport pentru toate versiunile Formularului de contact 7, personalizarea culorii de fundal a informațiilor, suport pentru cod HTML, aspect complet receptiv și multe altele.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Descarca | Demo | web hosting

Alte resurse recomandate

De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.

Concluzie

Acolo! Gata pentru acest tutorial, sper că vă ajută să afișați videoclipuri Youtube sau Vimeo într-un lightbox pe site-ul dvs. WordPress. simte-te liber sa împărtășiți sfatul prietenilor dvs. de pe rețelele de socializare.

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.

Dar, între timp, spuneți-ne despre dvs. comentarii și sugestii în secțiunea dedicată.

...

Acest articol conține comentarii 7

  1. bonjour,
    Caut o modalitate de a afișa un popup video după un clic pe un buton. Este posibil să se facă acest lucru cu WP Video Lightbox?

    vă mulțumesc,
    Cordialement,

  2. bonjour,
    Vă mulțumesc foarte mult pentru acest tutorial bine construit, am vrut să știu dacă a fost posibil să adăugați videoclipuri de pe alte platforme, altele decât You Tube și Vimeo (exemplu Openload) sau dacă ar exista o limită.

    a ta

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
7 acțiuni
acțiune5
tweet
Registru2