TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

YouTube, Vimeo Video Lightbox Popup dla Weebly

1

Weebly oferuje wiele elementów do umieszczania filmów w Twojej witrynie. Elementy YouTube i kod do umieszczenia na stronie są dostępne dla użytkowników bezpłatnych. Hostowany element odtwarzacza wideo HD jest dostępny tylko dla użytkowników planu pro i wyższych. Ale wszystkie te opcje pozwolą Ci osadzić filmy na stronie bez możliwości pokazania ich w wyskakującym lightboxie. W tym artykule wyjaśnimy, jak osadzić YouTube i Vimeo Video w wyskakującym lightboxie za pomocą widżetu jQuery.

Oto niektóre funkcje widżetu:

  • Widżet można połączyć z tekstem, przyciskiem lub obrazem.
  • Film otworzy się w wyskakującym trybie lightbox, gdy użytkownik kliknie link.
  • Możliwe jest połączenie YouTube, Vimeo lub dowolnego innego źródła wideo.
  • Możesz dostosować szerokość i wysokość wyskakującego okienka, aby dostosować je do układu witryny.
  • Widget ma dwie opcje zamknięcia wyskakującego okienka – klikając przycisk zamykania lub klikając zewnętrzny obszar nakładki.
  • Wyskakujące okienko wideo jest w pełni responsywne i działa na wszystkich urządzeniach.

Jak dodać widżet w witrynie Weebly?

Krok 1 – Pobierz pliki

Widżet lightbox wideo wymaga skryptu jQuery, CSS i HTML. Pobierz plik archiwum zip „Video Lightbox.zip", klikając poniższy przycisk pobierania.

Rozpakuj archiwum i rozpakuj następujące elementy:

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

Krok 2 – przesyłanie plików do Weebly

Drugim krokiem jest przesłanie wszystkich plików ze swojej witryny Weebly. Przejdź do zakładki „Motyw” i kliknij przycisk „ Edytuj HTML / CSS “. Zostaniesz przeniesiony do edytora kodu Weebly i przejdź do sekcji „Zasoby”. Prześlij wszystkie trzy pliki i zapisz zmiany.

YouTube, Vimeo Video Lightbox Popup dla Weebly

Przesyłanie plików widżetów do Weebly

Uwaga: jeśli masz dużo plików przesłanych w sekcji zasobów, utwórz nowy folder o nazwie „videolightbox” i prześlij pliki wewnątrz folderu.

Krok 3 – Linki do przesłanych plików

Przesłane pliki będą miały następujące linki względne:

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

Możesz także użyć bezwzględnych adresów URL, takich jak poniżej:

Jeśli to nie zadziała, kliknij prawym przyciskiem myszy przesłany plik i skopiuj pełny adres URL Weebly. Powinno wyglądać jak poniżej:

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

Pamiętaj, aby w kolejnych sekcjach użyć prawidłowego adresu URL. Jeśli masz wątpliwości, wklej pełny adres URL w przeglądarce i sprawdź, czy możesz wyświetlić zawartość.

Krok 4 – Łączenie skryptu na stronie Weebly

W witrynie Weebly otwórz stronę, na której chcesz wstawić widżet lightbox wideo, i przejdź do sekcji „Ustawienia SEO > Kod stopki”. Wklej następujący kod, aby połączyć plik skryptu w stopce strony:

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

YouTube, Vimeo Video Lightbox Popup dla Weebly

Dodaj kod stopki na stronie Weebly

Krok 5 – Łączenie CSS na stronie Weebly

Dodaj poniższy kod w sekcji „Ustawienia SEO > Kod nagłówka”, aby połączyć plik CSS.

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

Krok 6 – Wstawianie HTML

Wróć do obszaru zawartości strony po wstawieniu skryptu i CSS. Przeciągnij i upuść element kodu do umieszczenia na stronie i wstaw poniższy kod HTML.

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

Krok 7 – Dostosowywanie widżetu

  • Dodaj tylko wymagany blok HTML, aby wstawić przycisk lub link tekstowy lub obraz.
  • Zastąp URL obrazu i URL filmu własnymi.
  • Maksymalna szerokość i wysokość wyskakującego okienka to odpowiednio 680 i 480 pikseli, które można dostosować w CSS.
  • Zalecamy korzystanie z wyskakującego okienka wideo bez opcji autoodtwarzania, aby zapewnić lepsze wrażenia użytkownika. Upewnij się również, aby wyraźnie opisać, że kliknięcie linku otworzy wyskakujące okienko.
  • Blokowanie wyskakujących okienek w przeglądarkach zazwyczaj blokuje wyskakujące okienka otwierane w nowym oknie. To wyskakujące okienko wideo będzie działać nawet wtedy, gdy użytkownik zablokował wyskakujące okienko w przeglądarce.
  • Ten widżet jest przywoływany z widżetu lightbox jQuery YouTube i został zmodyfikowany tak, aby pasował do witryny Weebly. Możesz go również używać na dowolnych innych platformach.
  • Nie możesz użyć tego z elementem odtwarzacza wideo Weebly Pro HD, ponieważ nie otrzymasz adresu URL przesłanego wideo podczas korzystania z tego elementu. Widżet będzie przydatny, o ile masz adres URL filmu.

Poniżej jak będzie wyglądał widżet, kliknij w link, aby zobaczyć wyskakujące okienko z efektem lightbox.



Wideo Vimeo z funkcją autoodtwarzania jako łącze tekstowe


Wideo Vimeo bez autoodtwarzania jako łącze tekstowe


Kliknij na obrazek poniżej, aby zobaczyć wyskakujące okienko wideo YouTube.

YouTube, Vimeo Video Lightbox Popup dla Weebly

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów