Doriți să aflați cum să deschideți un videoclip YouTube într-o fereastră pop-up pe WordPress?

La caseta de lumina sau fereastra modală (pop-up) este o caracteristică foarte comună pe net. Cu toate acestea, este folosit în general pentru afișarea de imagini, formulare de captare 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 activat (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).

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] (pour YouTube)
[video_lightbox_vimeo5] (pour 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=0width="640height="480anchor="Une simple vidéo" description="Par Dr WP"]

Pentru un rezultat similar

Prezentarea-pentru-rezultate

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=0width="640height="480auto_thumb="1description="Par 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 folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

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

1. FileBird

FileBird

Te-ai chinuit vreodată să gestionezi mii de fișiere de imagini, video sau documente pe care le-ai încărcat pe FTP-ul tău WordPress? da sau nu, nu contează, important este să știi că WordPress plug-in FileBird vă va ajuta să vă gestionați fișierele media cu ușurință și să aduceți mai multă putere bibliotecii dvs.

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 acceptă, de asemenea, un număr mare de limbi. Deci, dacă doriți să oferiți un impuls gestionării bibliotecii dvs. media, aplicația WordPress plug-in FileBird 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

Acest Extensia WordPress al pluginului Contact Form 7 aduce o funcționalitate simplă de indicații pentru pluginul dvs. Contact Form 7. Sfaturile sale vor apărea atunci când elementul țintă este trecut cu mouse-ul. Pe dispozitivele mobile, sfaturile instrumente indică momentul în care elementul țintă este cuplat.

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.

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 cu prietenii de pe rețelele de socializare preferate

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

...