Vil du finde ud af, hvordan man åbner en YouTube-video i en popup på WordPress?

La lyskasse eller modalvindue (pop-up) er en meget almindelig funktion på nettet. Det bruges dog generelt til at vise billeder, e-mail-optagelsesformularer, kampagner eller endda registreringsformularer. 

Men vidste du, at det også er muligt at bruge det til at vise videoer på WordPress ? Nej? 

Ingen bekymringer, i denne vejledning viser jeg dig, hvordan du viser en video (YouTube – Vimeo – osv.) dans une lyskasse.

Men før, hvis du aldrig har installeret WordPress-opdagelse Sådan installeres en WordPress blog 7 trin et Hvordan at finde, installere og aktivere et WordPress tema på din blog 

Så tilbage til, hvorfor vi er her.

Årsagerne til, at du skal bruge a lightbox for at vise dine videoer 

De lyskasse er modalvinduer, men det, du ikke ved, er, at ikke alle de billeder, der vises i dem, alle indlæses under « chargement«  side. 

Le navigator afgift les billeder når lyskasse åbner, dette er også tilfældet for videoer. Kort sagt, det er en funktion, der gør det muligt for dine sider at åbne hurtigere. Det giver dig også mulighed for at reducere størrelsen (longueur) Af din sidefordi en del af indholdet på denne side vil være tilgængelig i dette modalvindue.

Våben med skrav, lad os komme i gang.

Sådan installeres og konfigureres plugin WP Video Lightbox

WP Video Lightbox er en plugin tilgængelig på WordPress.org. Hvilket betyder, at du kan installere det direkte fra dit WordPress-dashboard eller download det som en .zip-fil.

For flere detaljer, tjek vores trin for trin guide til, hvordan du installerer et WordPress-plugin.

Efter aktivering af plugin, gå til dens indstillingsside fra denne placering " indstillinger >> Vidéo lyskasse '.

Vi går direkte til " prettyPhoto '.

I virkeligheden dette plugin brug en anden plugin, der primært er beregnet til visning af et fotogalleri. Men du kan ændre nogle af de oplysninger, der vil blive anvendt på videoer.

For det vil jeg forklare nogle muligheder (Påkrævet)Så det er som du ønsker.

Allerede boghandlen prettyPhoto skal aktiveres (check « Aktiver prettyPhoto »). For at fortælle brugerne, at de er på samme side, kan du gøre vinduet gennemsigtigt (definere en værdi fra 0 til 1. Kommaværdier accepteres).

Oplev Egenskaberne ved en effektiv popup til WordPress 

Alle dine lysbokse kan have en titel, der kan vises (show titel). Nogle gange for store modalvinduer skal du tillade størrelse (Tillad resize). Og for længere videoer vil brugerne være i stand til at forstørre dem (Tillad Udvid), Bedre udseende.

For bredden og højden af lyskasse, kan du redigere felterne " standard bredde "Og" standard højde '. 

Sådan vælger du temaet for lyskasse, ændre rullemenuen tema ". Det er også muligt at aktivere autoplay (kryds i afkrydsningsfeltet " autoplay ").

Sådan viser du en lyskasse i en artikel

Le plugin foreslår en liste over kortkoder der giver dig mulighed for at vise lyskasse i artikler. Jeg glemte at fortælle dig, at du også kan se de tilgængelige videoer på Vimeo.

For at se en video YouTube ou Vimeodu skal bruge kortkoder suivant:

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

Hver af disse kortkoder accepterer parametre, som giver dig mulighed for at:

• Definer identifikatoren (VIDEO_ID) af en video, normalt i dette format " YzqKMmQ_3Sg '. eksempler [video_lightbox_youtub VIDEO_ID = "YzqKMmQ_3Sg"]
• Indstil højden på videoen (højde)
• Indstil bredden på videoen (bredde)
• Tilføj en beskrivelse (beskrivelse)
• Tilføj et HTML anker (anker) eller teksten til det link, der åbner vinduet
• Tilføj et miniaturebillede (auto_thumb)

Hvis du indstiller et HTML-anker, ignoreres miniature. Ellers auto_thumb tager værdien " 1 '.

Gå videre ved at opdage også Hvordan at bruge og administrere Kortkoder WordPress

Demo om brug

Med det, jeg lige har givet dig oplysninger, kan du vise en video ved hjælp af en kode, der ligner denne:

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

For et lignende resultat

Du kan se en miniature som vist ovenfor med en kode, der ligner denne.

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

For et resultat, der er identisk med dette

Før du forlader

Det skal bemærkes, at nogle parametre i kortkoder overskriver dem, der er defineret i indstillingerne.

Oplev også nogle premium WordPress-plugins  

Du kan bruge andet WordPress plugins for at give et moderne udtryk og for at optimere håndteringen af ​​din blog eller hjemmeside.

Vi tilbyder dig her nogle premium WordPress-plugins, der hjælper dig med det.

1. FileBird

Har du nogensinde kæmpet for at administrere tusindvis af billed-, video- eller dokumentfiler, du har uploadet til din WordPress FTP? ja eller nej, det er lige meget, det vigtige er at vide, at WordPress plugin FileBird vil hjælpe dig med at administrere dine mediefiler med lethed og bringe mere kraft til dit bibliotek.

Dens sømløse brugergrænseflade og kontekstmenu giver brugerne mulighed for at trække og slippe filer i mapper eller har de nødvendige rettigheder til hurtigt at oprette, omdøbe eller slette mapper på samme måde som du gør på din computer. Med dette plugin i hånden organiseres dine mediefiler systematisk, og du kan nemt vælge et billede, der skal indsættes på en side eller offentliggøre det.

Oplev også vores 6 WordPress-plugins for at puste nyt liv i dine artikler

Derudover er dette plugin fuldt ud kompatibelt med de mest populære plugins, især med WooCommerce, og understøtter også et stort antal sprog. Så hvis du vil give dit mediebiblioteksstyring et løft, WordPress plugin FileBird kunne være dit hemmelige våben.

Downloade | demo | Web-hosting

2. Social Share & Locker Pro

Social Share & Locker Pro-udvidelsen er designet til at hjælpe dit websted med at blive mere synligt på sociale netværk. Med blot et par klik kan du enten indstille placeringen af ​​dine sociale ikoner eller låse dit indhold ved at kræve deling på et af de sociale netværk, du tilbyder.

Du har 10 skabeloner, der skal dække de mest almindelige ønsker. Alle hendes modeller er perfekte og fungerer vidunderligt. Også med Social Share & Locker Pro kan du vise det fulde navn på sociale netværk eller bare ikonet. Det afhænger af dit design, den ledige plads eller din smag.

Downloade | demo | Web-hosting

3. Kontaktformular 7 Værktøjstips

Cette WordPress plugin af Contact Form 7-pluginnet bringer en nem værktøjstip-funktionalitet til dit Contact Form 7-plugin. Dens værktøjstip vises, når målelementet holdes over. På mobile enheder angiver værktøjstip, hvornår målelementet er aktiveret.

Dens hovedfunktioner er: brugervenlighed, support til alle versioner af kontaktformular 7, tilpasning af baggrundsfarven til værktøjstip, understøttelse af HTML-kode, fuldt layout lydhør og meget mere.

Downloade | demo | Web-hosting

Andre anbefalede ressourcer

Vi inviterer dig også til at konsultere nedenstående ressourcer for at komme videre i grebet og kontrollen af ​​dit websted og blog.

• Elementor: Sådan åbner du en popup fra en url eller menu
• Sådan nedgraderes en version af et WordPress-plugin
• Hvordan finder jeg en sponsor og tjener penge på din blog? : Vejledningen
• Sådan tilpasse WordPress dashboard for en klient
• Sådan oprettes en lydhør menu til mobil WordPress

Konklusion

Der! Det er det til denne tutorial, håber det hjælper dig med at vise Youtube eller Vimeo-videoer i en lightbox på dit WordPress-websted. du er velkommen til del med dine venner på dine foretrukne sociale netværk. 

Du vil dog også kunne konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse.

Men i mellemtiden, fortæl os om din kommentarer og forslag i det dedikerede afsnit.

...