TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

YouTube, Vimeo Video Lightbox Popup for Weebly

13

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.

YouTube, Vimeo Video Lightbox Popup for Weebly

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:

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 -widgetenWeebly -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>

YouTube, Vimeo Video Lightbox Popup for Weebly

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.

YouTube, Vimeo Video Lightbox Popup for Weebly

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon