Gå till innehållet

Hur man öppnar en Youtube video i ett popup på Wordpress

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Vill du ta reda på hur du ö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, formulä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 vara aktiv (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).

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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] (för YouTube)
[video_lightbox_vimeo5] (för 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 = 0bredd = "640höjd = "480ankare = "En enkel video " description = "Av Dr. WP "]

För ett liknande resultat

presentation-for-resultat

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0bredd = "640höjd = "480auto_tum = "1description = "Av 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 optimera greppet på din blogg eller webbplats.

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

1. FileBird

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

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 också ett stort antal språk. Så om du vill ge ett boost till hanteringen av ditt mediebibliotek kan FileBird WordPress-plugin 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

Denna WordPress-förlängning av plugin-formuläret Contact Form 7 ger en funktion för att enkelt lägga till verktygstips till ditt Plug-in för Contact Form 7. Dess verktygstips kommer att visas när målelementet hålls. På mobila enheter anger verktygstips när målobjektet är engagerat.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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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 tipset med dina vänner på dina 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.

.

Den här artikeln innehåller kommentarer 7

  1. Hej!
    Jag letar efter ett sätt att visa en video popup efter ett klick av en knapp. Är det möjligt att göra det med WP Video Lightbox?

    tack,
    Hälsningar,

  2. Hej!
    Tack så mycket för denna välkonstruerade handledning, jag ville veta om det var möjligt att lägga till videor från andra plattformar än You Tube och Vimeo (Openload-exempel) eller om det skulle finnas en gräns.

    er

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
7 aktier
del5
tweet
Enregistrer2