YouTube, Vimeo Video Lightbox Popup for Weebly

Weebly tilbyr mange elementer for å bygge inn videoer på nettstedet ditt. YouTube og innebygde kodeelementer er tilgjengelige for gratisbrukere. Hosted HD -videospillerelement er bare tilgjengelig for proff og høyere planbrukere. Men alle disse alternativene lar deg legge inn videoer på siden uten mulighet for å vise dem i en popup -lysboks. I denne artikkelen vil vi forklare hvordan du legger inn YouTube og Vimeo Video i en popup -lysboks ved hjelp av jQuery -widget.

Her er noen av funksjonene til widgeten:

• Du kan koble widgeten til en tekst eller knapp eller et bilde.
• Videoen åpnes i en lysboks -popup -modus når brukerne klikker på en lenke.
• Det er mulig å koble YouTube, Vimeo eller en annen videokilde.
• Du kan tilpasse bredden og høyden på popup -vinduet for å justere for nettstedets layout.
• Widgeten har to alternativer for å lukke forgrunnsvinduet – enten ved å klikke på lukkeknappen eller ved å klikke på det utvendige overleggsområdet.
• Videopop -vinduet er fullt responsivt og fungerer på alle enheter.

Hvordan legge til widget på Weebly -nettstedet?

Trinn 1 – Last ned filene

Videolysboks -widgeten krever jQuery -skript, CSS og HTML. Last ned zip -arkivfilen “Video Lightbox.zip" ved å klikke på nedlastingsknappen nedenfor.

Pakk ut arkivet og trekk ut følgende elementer:

• video-popup.js
• video-popup.css
• close.png

Trinn 2 – Last opp filer i Weebly

Det andre trinnet er å laste opp alle filene på ditt Weebly -nettsted. Naviger til kategorien "Tema" og klikk på " Rediger HTML / CSS " -knappen. Du blir ført til Weebly -kodeditoren og navigerer til “Assets” -delen. Last opp alle de tre filene og lagre endringene.

Laster opp widgetfiler i Weebly

Merk: Hvis du har mange filer lastet opp under aktivaseksjonen, må du opprette en ny mappe med navnet "videolightbox" og laste opp filene i mappen.

Trinn 3 – Lenker for opplastede filer

De opplastede filene vil ha følgende relative lenker:

• /files/theme/video-popup.js
• /files/theme/video-popup.css
• /files/theme/close.png

Du kan også bruke de absolutte nettadressene som nedenfor:

• https://yoursite.com/files/theme/video-popup.js
• https://yoursite.com/files/theme/video-popup.css
• https://yoursite.com/files/theme/close.png

Hvis det ikke fungerer, høyreklikker du på den opplastede filen og kopierer hele Weebly -URL -en. Det skal se ut som nedenfor:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/881978474505006211/files/close.png

Husk å bruke riktig URL i de følgende avsnittene. Hvis du er i tvil, lim inn hele URL -en i nettleseren og kontroller at du kan se innholdet.

Trinn 4 – Koble sammen script i Weebly Page

Åpne siden du vil sette inn video lightbox -widgeten på Weebly -nettstedet, og naviger til delen "SEO -innstillinger> bunntekst". Lim inn følgende kode for å koble skriptfilen til sidefoten:

<script type="text/javascript" src="/files/theme/video-popup.js"></script>

Legg til bunntekst på Weebly -siden

Trinn 5 – Kobling av CSS i Weebly Page

Legg til koden nedenfor under "SEO Settings> Header Code" -delen for å koble CSS -filen.

<link rel="stylesheet" type="text/css" href="/files/theme/video-popup.css"></link>

Trinn 6 – Sette inn HTML

Gå tilbake til innholdsområdet på siden etter at du har satt inn script og CSS. Dra og slipp et innebygd kodeelement og sett inn HTML -koden nedenfor.

<!-- YouTube Popup as Button with Autoplay -->
<div class="btn">
<a class="bla-1" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video with Autoplay as Button Link</a>
</div>
<!-- YouTube Popup as Button without Autoplay -->
<div class="btn"><a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video without Autoplay as Text Link</a>
</div>
<!-- Vimeo Popup as Text Link with Autoplay -->
<p>
<a class="bla-1" href="https://vimeo.com/81527238">Vimeo Video with Autoplay as Text Link</a>
</p>
<!-- Vimeo Popup as Text Link without Autoplay -->
<p>
<a class="bla-2" href="https://vimeo.com/81527238">Vimeo Video without Autoplay as Text Link</a>
</p>
<!-- YouTube Video Linked with Image without Autoplay -->
<div>
<a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">
<img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88576-613230c13b5c8.jpg" width="300" height="150"></a>
</div>

Trinn 7 – Tilpass widgeten

• Legg til bare den nødvendige HTML -blokken for å sette inn knapp eller tekstkobling eller bilde.
• Erstatt bilde -URL og video -URL -er med din egen.
• Maks bredde og høyde på popup -vinduet er definert som henholdsvis 680px og 480 px, som du kan tilpasse i CSS.
• Vi anbefaler deg å bruke video -popupen uten autoplay -alternativ for å tilby bedre brukeropplevelse. Sørg også for å beskrive tydelig at ved å klikke på lenken åpnes en popup.
• Blokkering av popup -vinduer i nettlesere blokkerer vanligvis popup -vinduet som åpnes i et nytt vindu. Denne video -popupen vil fungere selv om brukeren har blokkert popup -vinduet i nettleseren.
• Denne widgeten er referert fra jQuery YouTube lightbox -widgeten og endret for å passe på Weebly -nettstedet. Du kan også bruke den på andre plattformer.
• Du kan ikke bruke dette med Weebly Pro HD -videospillerelementet, da du ikke får lastet opp video -URL når du bruker det elementet. Widgeten vil være nyttig, så lenge du har nettadressen til en video.

Nedenfor ser du hvordan widgeten vil se ut. Klikk på lenken for å se popup-vinduet med lysbokseffekt.

Vimeo -video med autospill som tekstkobling

Vimeo -video uten autospill som tekstkobling

Klikk på bildet nedenfor for å se popup -vinduet for YouTube -video.