Vill du ta reda på hur man öppnar en YouTube-video i en popup på WordPress?

La ljuslåda eller modal fönster (pop up) är en mycket vanlig funktion på nätet. Det används dock vanligtvis för att visa bilder, e-postformulär, kampanjer eller till och med registreringsformulär. 

Men visste du att det också är möjligt att använda den för att visa videor på Wordpress ? Nej? 

Inga bekymmer, i denna handledning kommer jag att visa dig hur du visar en video (YouTube – Vimeo – etc.) i en ljuslåda.

Men tidigare, om du aldrig har installerat WordPress-upptäckt Hur man installerar en Wordpress-blogg 7 steg et Hur man hittar, installera och aktivera en Wordpress tema på din blogg 

Tillbaka till varför vi är här.

Skälen till att du bör använda a lightbox för att visa dina videor 

den ljuslåda är modala fönster, men vad du inte vet är att inte alla bilder som visas i dem laddas alla under « charge«  sida. 

Le Navigateur laddning les bilder när ljuslåda öppnas, detta är också fallet för videor. Kort sagt, det är en funktion som låter dina sidor öppnas snabbare. Det gör att du också kan minska storleken (longueur) På sidaneftersom en del av innehållet på denna sida kommer att finnas tillgängligt i detta modalfönster.

Skräck av prat, låt oss komma igång.

Hur man installerar och konfigurera plugin WP Video Lightbox

WP Video Lightbox är en plugin tillgänglig på WordPress.org. Vilket innebär att du kan installera det direkt från din WordPress-instrumentpanel, eller ladda ner den som en .zip-fil.

För mer information, Kolla in vår steg-för-steg-guide för hur du installerar ett WordPress-plugin.

Efter att ha aktiverat plugin, gå till inställningssidan från den här platsen " inställningar >> Vidéo ljuslåda ".

Vi går direkt till " prettyPhoto ".

I verkligheten detta plugin använd en annan plugin, som främst är avsedd för visning av ett fotogalleri. Men du kan ändra en del av informationen som kommer att tillämpas på videor.

För det förklarar jag några alternativ (Obligatoriskt)Så att det är som du vill.

Redan bokhandeln prettyPhoto måste aktiveras (kontrollera « aktivera prettyPhoto »)För att låta användarna veta att de är på samma sida kan du göra fönstret transparent (définir ett värde från 0 till 1. Kommavärden accepteras).

Upptäck Egenskaperna hos en effektiv popup för WordPress 

Alla dina ljuslådor kan ha en titel som kan visas (Show rubricerade). Ibland måste du ändra storlek på stora modala fönster (Tillåt ändra storlek). Och för längre videor kan användarna förstora dem (Tillåt Bygga ut), för att bättre titta på dem.

För bredden och höjden på ljuslåda, kan du redigera fälten " standard bredd "Och" standard höjd ". 

Att välja tema för ljuslåda, ändra rullgardinsmenyn tema ". Det är också möjligt att aktivera autoplay (kryssa i rutan " Auto »).

öppna en Youtube-video i en popup - definiera-les-regalges

Hur visas en ljuslåda i en artikel

Le plugin föreslår en lista över kortkoder som gör att du kan visa ljuslåda i artiklar. Jag glömde att berätta att du också kan se de videor som finns tillgängliga på Vimeo.

För att se en video Youtube ou Vimeodu måste använda kortkoder suivant:

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

Var och en av dessa kortkoder accepterar parametrar, som gör att du kan:

  • Definiera identifieraren (video_id) av en video, vanligtvis i det här formatet " YzqKMmQ_3Sg ". Exemple [video_lightbox_youtub video_id = "YzqKMmQ_3Sg"]
  • Ställ in höjden på videon (höjd)
  • Ställ in videoklippets bredd (bredd)
  • Lägg till en beskrivning (beskrivning)
  • Lägg till ett HTML-ankare (ankare) eller texten till länken som öppnar fönstret
  • Lägg till en miniatyrbild (auto_thumb)

Om du ställer in ett HTML-ankare ignoreras miniatyren. annars auto_thumb tar värdet " 1 ".

Gå längre genom att upptäcka också Hur man använder och hanterar kortkoder Wordpress

Demo om en användning

Med det jag just gav dig information kan du visa en video med en kod som liknar den här:

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480anchor="Une simple vidéo" description="Par Dr WP"]

För ett liknande resultat

presentation-for-resultat

Du kan se en miniatyrbild som visas ovan med en kod som liknar den här.

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480auto_thumb="1description="Par Dr WP"]

För ett resultat som är identiskt med det här

mini-dune-video

innan du lämnar

Det bör noteras att vissa parametrar i kortkoder kommer att skriva över de som definierats i inställningarna.

Upptäck också några premium WordPress-plugins  

Du kan använda andra Wordpress plugins för att ge ett modernt utseende och för att optimera hanteringen av din blogg eller hemsida.

Vi erbjuder dig här några premium WordPress-plugins som hjälper dig att göra det.

1. FileBird

FileBird

Har du någonsin kämpat för att hantera tusentals bild-, video- eller dokumentfiler som du laddat upp till din WordPress FTP? ja eller nej, det spelar ingen roll, det viktiga är att veta att Wordpress plugin FileBird hjälper dig att hantera dina mediefiler med lätthet och ge mer kraft till ditt bibliotek.

Dess sömlösa användargränssnitt och snabbmeny gör det möjligt för användare att dra och släppa filer till mappar eller har de nödvändiga rättigheterna för att snabbt skapa, byta namn på eller ta bort mappar på samma sätt som du gör på din dator. Med detta plugin i handen organiseras dina mediefiler systematiskt och du kan enkelt välja en bild som du vill infoga på en sida eller publicera den.

Upptäck också vår 6 WordPress-plugins för att blåsa nytt liv i dina artiklar

Dessutom är detta plugin helt kompatibelt med de mest populära plugins, särskilt med WooCommerce, och stöder även ett stort antal språk. Så om du vill ge ditt mediebibliotekshantering ett lyft, Wordpress plugin FileBird kan vara ditt hemliga vapen.

Ladda nerdemo webbhotell

2. Social Share & Locker Pro

Pluggen Social Share & Locker Pro har utformats för att hjälpa din webbplats att bli mer synlig på sociala nätverk. Med bara några få klick kan du antingen ställa in positionen för dina sociala ikoner eller låsa ditt innehåll genom att kräva delning på ett av de sociala nätverk som erbjuds av dig.

Social Share Locker Pro WordPress-plugin

Du har tio mallar som ska täcka de vanligaste önskemålen. Alla dess modeller är perfekta och fungerar underbart. Dessutom kan du med Social Share & Locker Pro visa hela namnet på sociala nätverk eller bara ikonen. Det beror på din design, tillgängligt utrymme eller din smak.

Ladda ner | demo | webbhotell

3. Kontaktformulär 7 Verktygstips

Cette WordPress plugin av Contact Form 7-pluginet ger en enkel verktygstipsfunktion till din Contact Form 7-plugin. Dess verktygstips visas när målelementet hålls över. På mobila enheter visar verktygstips när målelementet är aktiverat.

Kontaktformulär 7 verktygstips

Dess huvudfunktioner är: användarvänlighet, stöd för alla versioner av kontaktformulär 7, anpassning av bakgrundsfärgen på verktygstips, stöd för HTML-kod, fullständig layout lyhörd och mer.

Ladda ner | demo | webbhotell

Andra rekommenderade resurser

Vi inbjuder dig också att konsultera resurserna nedan för att gå vidare i greppet och kontrollen av din webbplats och blogg.

Slutsats

Där! Det är det för denna handledning, hoppas att det hjälper dig att visa Youtube eller Vimeo-videor i en lightbox på din WordPress-webbplats. Känn dig fri att dela med dina vänner på dina favorit sociala nätverk

Du kommer dock också att kunna konsultera vår medel, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande.

Men under tiden berätta om din commentaires och förslag i det dedikerade avsnittet.

.