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 »).
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=0" width="640" height="480" anchor="Une simple vidéo" description="Par Dr WP"]
Pentru un rezultat similar
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=0" width="640" height="480" auto_thumb="1" description="Par Dr WP"]
Pentru un rezultat identic cu acesta
Î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
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ă.
Descarca | Demo | 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.
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.
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.
- Elementor: Cum se deschide o fereastră pop-up dintr-o adresă URL sau meniu
- Cum să anulați o versiune a unui plugin WordPress
- Cum să găsiți un sponsor și să vă monetizați blogul? : Ghidul
- Cum de a personaliza tabloul de bord WordPress pentru un client
- Cum de a crea un meniu receptiv pentru WordPress mobil
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ă.
...
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,
bonjour,
Da, în principiu.
am uitat
mulțumesc
Bună ziua și bravo pentru tutorial.
este posibil să măriți miniatura videoclipului când folosesc „auto_thumb”?
În principiu, „auto_thumb” folosește o imagine predefinită cu dimensiuni fixe.
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
bonjour,
Da, în principiu. Nu am testat încă.