TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

YouTube, Vimeo Video Lightbox Popup Weeblylle

5

Weebly tarjoaa monia elementtejä videoiden upottamiseen sivustoosi. YouTube- ja upotuskoodit ovat ilmaisten käyttäjien käytettävissä. Isännöity HD -videosoittimen elementti on saatavana vain ammattilaisille ja korkeamman tason käyttäjille. Mutta kaikki nämä vaihtoehdot mahdollistavat videoiden upottamisen sivulle ilman mahdollisuutta näyttää sitä ponnahdusikkunassa. Tässä artikkelissa kerrotaan, miten upottaa YouTube ja Vimeo popup lightboxiin jQuery vekotin.

Tässä on joitain widgetin ominaisuuksia:

  • Voit linkittää widgetin tekstiin tai painikkeeseen tai kuvaan.
  • Video avautuu lightbox -ponnahdustilassa aina, kun käyttäjät napsauttavat linkkiä.
  • On mahdollista linkittää YouTube, Vimeo tai mikä tahansa muu videolähde.
  • Voit muokata ponnahdusikkunan leveyttä ja korkeutta mukauttaaksesi sivustosi ulkoasua.
  • Widgetillä on kaksi vaihtoehtoa ponnahdusikkunan sulkemiseksi – joko napsauttamalla sulkemispainiketta tai napsauttamalla ulkoista peittoaluetta.
  • Videon ponnahdusikkuna on täysin responsiivinen ja toimii kaikilla laitteilla.

Kuinka lisätä widget Weebly -sivustoon?

Vaihe 1 – Lataa tiedostot

Video lightbox -widget vaatii jQuery -komentosarjan, CSS: n ja HTML: n. Lataa zip -arkistotiedosto "Video Lightbox.zip” napsauttamalla alla olevaa latauspainiketta.

Pura arkisto ja purkaa seuraavat kohteet:

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

Vaihe 2 – Tiedostojen lataaminen Weeblyssä

Toinen vaihe on ladata kaikki Weebly -sivustosi tiedostot. Siirry "Teema" -välilehdelle ja napsauta " Muokkaa HTML / CSS " -painiketta. Sinut ohjataan Weebly -koodieditoriin ja siirryt "Omaisuus" -osaan. Lataa kaikki kolme tiedostoa ja tallenna muutokset.

YouTube, Vimeo Video Lightbox Popup Weeblylle

Widget -tiedostojen lataaminen Weeblyssä

Huomautus: Jos olet ladannut paljon tiedostoja sisältö -osioon, luo uusi kansio nimeltä “videolightbox” ja lähetä tiedostot kansioon.

Vaihe 3 – Ladattujen tiedostojen linkit

Ladatuissa tiedostoissa on seuraavat suhteelliset linkit:

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

Voit myös käyttää absoluuttisia URL -osoitteita, kuten alla:

Jos tämä ei toimi, napsauta ladattua tiedostoa hiiren kakkospainikkeella ja kopioi koko Weebly -URL -osoite. Sen pitäisi näyttää tältä:

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

Muista käyttää oikeaa URL -osoitetta seuraavissa osioissa. Jos olet epävarma, liitä koko URL -osoite selaimeen ja tarkista, että voit katsella sisältöä.

Vaihe 4 – Skriptin linkittäminen Weebly -sivulla

Avaa Weebly -sivustossasi sivu, johon haluat lisätä video -lightbox -widgetin, ja siirry kohtaan SEO -asetukset> Alatunnisteen koodi. Liitä seuraava koodi linkittääksesi komentotiedoston sivun alatunnisteeseen:

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

YouTube, Vimeo Video Lightbox Popup Weeblylle

Lisää alatunniste Weebly -sivulle

Vaihe 5 – CSS: n linkittäminen Weebly -sivulla

Linkitä CSS -tiedosto lisäämällä alla oleva koodi kohtaan "SEO -asetukset> Otsikkokoodi".

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

Vaihe 6 – HTML -koodin lisääminen

Palaa sivun sisältöalueelle komentosarjan ja CSS: n lisäämisen jälkeen. Vedä ja pudota upotuskoodin elementti ja lisää alla oleva HTML -koodi.

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

Vaihe 7 – Widgetin mukauttaminen

  • Lisää vain tarvittava HTML -lohko painikkeen tai tekstilinkin tai kuvan lisäämiseksi.
  • Korvaa kuvan URL -osoite ja videon URL -osoite omallasi.
  • Ponnahdusikkunan enimmäisleveys ja -korkeus ovat 680 pikseliä ja 480 pikseliä, joita voit muokata CSS: ssä.
  • Suosittelemme käyttämään videon ponnahdusikkunaa ilman automaattista toistovaihtoehtoa paremman käyttökokemuksen tarjoamiseksi. Muista myös kuvata selvästi, että linkin napsauttaminen avaa ponnahdusikkunan.
  • Ponnahdusikkunoiden estäminen selaimissa estää yleensä ponnahdusikkunan, joka avautuu uuteen ikkunaan. Tämä videon ponnahdusikkuna toimii, vaikka käyttäjä estäisi ponnahdusikkunan selaimessa.
  • Tähän widgettiin viitataan jQuery YouTube -valolaatikko -widgetistä ja sitä muokataan Weebly -sivuston mukaan. Voit käyttää sitä myös muilla alustoilla.
  • Et voi käyttää tätä Weebly Pro HD -videosoitinelementin kanssa, koska et saa ladatun videon URL -osoitetta, kun käytät tätä elementtiä. Widgetistä on hyötyä, kunhan sinulla on videon URL -osoite.

Alla näet, miltä widget näyttää. Napsauta linkkiä nähdäksesi ponnahdusikkunan, jossa on valotehoste.



Vimeo Video, jossa automaattinen toisto tekstilinkkinä


Vimeo Video ilman automaattista toistoa tekstilinkkinä


Napsauta alla olevaa kuvaa nähdäksesi YouTube -videon ponnahdusikkunan.

YouTube, Vimeo Video Lightbox Popup Weeblylle

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja