Vil du finne ut hvordan du åpner en YouTube-video i en popup på WordPress?

La lysbilde eller modalvindu (pop-up) er en veldig vanlig funksjon på nettet. Imidlertid brukes det vanligvis til å vise bilder, e-postopptaksskjemaer, kampanjer eller til og med registreringsskjemaer. 

Men visste du at det også er mulig å bruke den til å vise videoer på WordPress ? Nei? 

Ingen bekymringer, i denne opplæringen vil jeg vise deg hvordan du viser en video (YouTube – Vimeo – osv.) dans une lysbilde.

Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

Årsakene til at du bør bruke a lightbox for å vise videoene dine 

den lysbilde er modale vinduer, men det du ikke vet er at ikke alle bildene som vises i dem er lastet inn i løpet av « charge«  siden. 

Le navigatør kostnad les bilder når lysbilde åpner, er dette også tilfelle for videoer. Kort sagt, det er en funksjon som vil tillate at sidene dine åpnes raskere. Det vil også tillate deg å redusere størrelsen (longueur) På siden dinfordi en del av innholdet på denne siden vil være tilgjengelig i dette modale vinduet.

La meg komme til å snakke.

Hvordan installere og konfigurere plugg inn WP Video Lightbox

WP Video Lightbox er en plugg inn tilgjengelig på WordPress.org. Hvilket betyr at du kan installere det rett fra WordPress-dashbordet ditt, eller last den ned som en .zip-fil.

For flere detaljer, sjekk ut vår trinnvise guide for hvordan du installerer et WordPress-plugin.

Etter å ha aktivert plugg inn, gå til innstillingssiden fra dette stedet " innstillinger >> Vidéo lysbilde '.

Vi vil gå direkte til " prettyPhoto '.

I virkeligheten dette plugg inn bruk en annen plugg inn, som først og fremst er ment for visning av et fotogalleri. Men du kan endre noe av informasjonen som vil bli brukt på videoer.

For det vil jeg forklare noen alternativer (Påkrevd)Slik at det er som du ønsker.

Allerede bokhandelen prettyPhoto må aktiveres (sjekk « aktiver prettyPhoto »). For å gi brukerne beskjed om at de er på samme side, kan du gjøre vinduet gjennomsiktig (definere en verdi fra 0 til 1. Kommaverdier aksepteres).

Oppdag Egenskapene til en effektiv popup for WordPress 

Alle lysboksene dine kan ha en tittel som kan vises (Show tittel). Noen ganger for store modalvinduer må du tillate endring av størrelse (Allow endre størrelse). Og for lengre videoer vil brukerne kunne forstørre dem (Allow Expand), for bedre å se på dem.

For bredden og høyden på lysbilde, kan du redigere feltene " standard~~POS=TRUNC bredde "Og" standard~~POS=TRUNC høyde '. 

Å velge tema for lysbilde, endre rullegardinmenyen tema ". Det er også mulig å aktivere autospill (merk av i ruten " Autoplay ").

Hvordan vise en lysbilde i en artikkel

Le plugg inn foreslår en liste over kortkoder som lar deg vise lysbilde i artikler. Jeg glemte å fortelle deg at du også kan se videoene som er tilgjengelige på Vimeo.

For å se en video YouTube ou Vimeodu må bruke kortkoder suivant:

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

Hver av disse kortkoder godtar parametere, som lar deg:

• Definer identifikatoren (video_id) av en video, vanligvis i dette formatet " YzqKMmQ_3Sg '. Eksempler [video_lightbox_youtub video_id = "YzqKMmQ_3Sg"]
• Angi høyden på videoen (høyde)
• Angi bredden på videoen (bredde)
• Legg til en beskrivelse (beskrivelse)
• Legg til et HTML anker (anker), eller teksten til lenken som åpner vinduet
• Legg til et miniatyrbilde (auto_thumb)

Hvis du setter et HTML-anker, ignoreres miniatyrbildet. ellers auto_thumb tar verdien " 1 '.

Gå videre ved å oppdage også Hvordan bruke og administrere kortkoder WordPress

Demo om bruk

Med det jeg nettopp ga deg informasjon, kan du vise en video ved hjelp av en kode som ligner på 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 et miniatyrbilde som vist ovenfor med en kode som ligner på denne.

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

For et resultat som er identisk med dette

før du forlater

Det skal bemerkes at noen parametere i kortkoder vil overskrive de som er definert i innstillingene.

Oppdag også noen premium WordPress-plugins  

Du kan bruke andre WordPress plugins for å gi et moderne utseende og for å optimalisere håndteringen av bloggen eller nettsiden din.

Vi tilbyr deg her noen premium WordPress-plugins som vil hjelpe deg å gjøre det.

1. FileBird

Har du noen gang slitt med å administrere tusenvis av bilde-, video- eller dokumentfiler du lastet opp til WordPress FTP? ja eller nei, det spiller ingen rolle, det viktigste er å vite at WordPress Plugin FileBird vil hjelpe deg med å administrere mediefilene dine på en enkel måte og gi mer kraft til biblioteket ditt.

Det sømløse brukergrensesnittet og kontekstmenyen lar brukere dra og slippe filer til mapper eller har de nødvendige rettighetene til raskt å opprette, gi nytt navn eller slette mapper på samme måte som du gjør på datamaskinen din. Med dette pluginet i hånden vil mediefilene dine organiseres systematisk, og du kan enkelt velge et bilde du vil sette inn på en side eller publisere det.

Oppdag også vår 6 WordPress-plugins for å blåse nytt liv i artiklene dine

I tillegg er denne plugin fullt kompatibel med de mest populære plugins, spesielt med WooCommerce, og støtter også et stort antall språk. Så hvis du ønsker å gi mediebibliotekadministrasjonen et løft, kan du WordPress Plugin FileBird kan være ditt hemmelige våpen.

Last ned | dEMO | Webhotell

2. Social Share & Locker Pro

Social Share & Locker Pro-utvidelsen er designet for å hjelpe nettstedet ditt å bli mer synlig på sosiale nettverk. Med bare noen få klikk kan du enten angi posisjonen til dine sosiale ikoner eller låse innholdet ditt ved å kreve deling på et av de sosiale nettverkene du tilbyr.

Du har 10 maler som skal dekke de vanligste ønskene. Alle modellene hennes er perfekte og fungerer fantastisk. I tillegg, med Social Share & Locker Pro, vil du kunne vise det fulle navnet på sosiale nettverk eller bare ikonet. Det vil avhenge av design, plass tilgjengelig eller smak.

Last ned | dEMO | Webhotell

3. Kontaktskjema 7 Verktøytips

Dette WordPress-utvidelse av plugin-modulen Contact Form 7 gir en enkel verktøytipsfunksjonalitet til plugin-modulen Contact Form 7. Verktøytipsene vil vises når målelementet holdes over. På mobile enheter indikerer verktøytips når målelementet er aktivert.

Hovedfunksjonene er: brukervennlighet, støtte for alle versjoner av kontaktskjema 7, tilpasning av bakgrunnsfargen på verktøytipsen, støtte for HTML-kode, fullstendig layout lydhør og mer.

Last ned | dEMO | Webhotell

Andre anbefalte ressurser

Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.

• Elementor: Hvordan åpne en popup fra en url eller meny
• Hvordan nedgradere en versjon av en WordPress-plugin
• Hvordan finne en sponsor og tjene penger på bloggen din? : Guiden
• Hvordan tilpasse WordPress dashbordet for en klient
• Hvordan lage en forståelsesfull meny for mobil WordPress

konklusjonen

Det! Det er det for denne opplæringen, håper det hjelper deg å vise Youtube eller Vimeo-videoer i en lightbox på WordPress-nettstedet ditt. Føl deg fri til å del med vennene dine på dine favoritt sosiale nettverk. 

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting.

Men i mellomtiden, fortell oss om din commentaires og forslag i den dedikerte delen.

...