Jak dodać wideo jako tło pełnoekranowe w WordPress

Filmy są niesamowite, zapewniają więcej chwytliwych mediów i uchwycą więcej emocji niż obraz.

Obecnie coraz więcej webmasterów/marek dąży do umieszczania filmów jako pełnego tła na swojej stronie internetowej. Jednak złożoność osadzania wideo w tle wymaga pewnej wiedzy technicznej.

Aby wszystko było proste i świetne dla naszych czytelników, wymienimy darmową wtyczkę do osadzonych filmów w tle, a także przejdziemy przez szczegółowy samouczek dotyczący osadzania filmów w tle za pomocą prostych konfiguracji.

Uwaga: do pełnego zrozumienia treści potrzebne jest doświadczenie w kodowaniu. Zapraszam do zadawania pytań w komentarzach, jeśli coś wygląda na mylące.

Wtyczka do dodawania wideo jako pełnoekranowego tła w WordPress

Wtyczki są świetne, zapewniają wymaganą funkcjonalność za pomocą kilku kliknięć. Wymienię kilka wtyczek, zanim przejdę do szczegółowego samouczka, jak osadzać filmy w tle za pomocą kodowania.

1. mb .YTPlayer do filmów w tle

Jedna z popularnych wtyczek wideo do integracji w tle. Wtyczka integruje niestandardowy odtwarzacz wewnątrz elementu strony.

Dzięki wtyczce użytkownicy mogą łatwo integrować filmy na stronach i publikować. Instalacja jest prosta, a wtyczka generuje krótki kod ułatwiający integrację.

Wtyczka nie obsługuje całkowicie responsywnego układu.

Pełne szczegóły i pobieranie | Próbny

2. Slider Hero z efektami animacji

Motywem wtyczki jest umożliwienie osadzania tła wideo w WordPress z efektami suwaka. Wtyczka oferuje 11 animacji w tle, możliwość dodawania muzyki w tle, integrację wideo z YouTube i Vimeo itp.

Wtyczka jest kompatybilna z dowolnym motywem lub edytorem WordPress, takim jak Gutenberg, dzięki czemu będzie responsywna i szybka na wszystkich witrynach WordPress.

Pełne szczegóły i pobieranie | Próbny

Teraz nadchodzi prawdziwa część. Kolejna część wymaga kodowania i obsługi technicznej platformy WordPress.

Osadzanie wideo wymaga wielu kroków. Przejdźmy przez kolejne kroki. Kiedy zrozumiesz te kroki, możesz zrozumieć, jak skomplikowana może być prosta rzecz.

1. Używając Div, aby zrobić miejsce na wideo.

2. Uzyskaj pozycję Div w lewym górnym rogu rzutni jako bezwzględną lub stałą. Następnym krokiem jest ustawienie jego wysokości i szerokości na 100%, a następnie ustawienie Z-index na 1. Z-index określa głębokość treści.

3. Skalowanie Div Video za pomocą JavaScript.

4. Ekran monitora zmienia rozmiar i ponownie skaluje wideo za każdym razem, gdy użytkownik skaluje wideo.

5. Upewnij się, że kod działa w różnych przeglądarkach i mobilnym systemie operacyjnym.

Wygląda na to, że dużo kodowania, ale użyjemy prostej niestandardowej wtyczki, aby zautomatyzować proces osadzania wideo w tle postu lub stron WordPress.

BGVIDEO: Pobierz

Pobierz wtyczkę i przejdź przez normalną instalację (podobnie jak instalacja innych wtyczek).

Ta prosta wtyczka działa w parze z shortcode, a krótki kod o nazwie „bgvideo” jest dostępny we wtyczce. Shortcode działa jako brama do osadzania wideo na dowolnych stronach lub postach.

Zanim przejdziemy dalej, musimy podać kilka parametrów do shortcode, aby uzyskać pełną funkcjonalność.

Parametry to wysokość, szerokość, mp4, webm, ogg, autoodtwarzanie, pętla, wyciszenie i naprawienie. Wysokość i szerokość odnoszą się odpowiednio do wysokości i szerokości filmu. Pola mp4, webm, ogg odnoszą się do adresu URL odpowiedniego formatu wideo. Konieczne jest podanie adresu URL każdego formatu, aby film bez problemu działał na wielu urządzeniach.

Dodawanie filmów do biblioteki multimediów

Następny krok obejmuje dodanie filmów do biblioteki multimediów. Upewnij się, że dodałeś wszystkie formaty (webm, ogg, mp4) do biblioteki multimediów.

Za pomocą bgvideo skróty wideo są przekształcane w bgvideo.

Krótki kod wideo wygląda jak poniżej

[%video width=”1280″ height=”720″ mp4=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4″][/video] [%video szerokość=”1280″ wysokość=”720″ webm=”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”][/video]

<a%href=”http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”><img%class=”alignnone size-large wp-image-1392″ src =”http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt=”video-background-test” width=”1024″ height=”576″ />

Nie zapomnij usunąć znaku procentu (%) przed skrótem wideo i tagiem kotwicy.

Za pomocą bgvideo powyższy kod przekształci się w poniższy kod

 [bgvideo szerokość = "1280" wysokość = "720" 
  mp4="http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm="http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  poster="http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  naprawiono="nie"]

Wtyczka automatycznie zmienia shortcode wideo na shortcode bgvideo.

Uczynienie wideo przezroczystym dla użytkownika

Po skonfigurowaniu wszystkiego musisz zrobić trochę magii we właściwości CSS strony. Powodem jest fakt, że zawartość strony utrudnia wyświetlanie wideo.

CSS usunie zawartość strony i pozwoli zabłysnąć wideo dla odwiedzających.

Wstaw poniższy kod CSS, aby wszystko działało poprawnie.

#strona{

tło:brak;

}

Istnieje wiele innych poprawek, które są potrzebne, aby całkowicie skonfigurować tło wideo.

Zakończyć

Najlepszym rozwiązaniem dla naszych czytelników jest użycie pełnoprawnej wtyczki i zignorowanie części dotyczącej kodowania — część dotycząca kodowania tylko pogorszy sytuację, jeśli nie znasz kodowania. Możesz przekazać tę potrzebę swoim programistom, ale to nie jest darmowe.

Innym świetnym alternatywnym rozwiązaniem jest wykorzystanie animowanych GIF-ów jako tła. Istnieją dwa powody, dla których warto używać animowanych GIF-ów. Pierwszym z nich jest niskie wykorzystanie przepustowości w porównaniu do wideo, a drugim jest łatwa instalacja. Kolejną wielką zaletą jest to, że prawdopodobnie nie musisz się martwić o przenośność i problemy ze zgodnością innych urządzeń.

Animację można łatwo uformować za pomocą CSS lub przesłać poprzez zwykłą zmianę tła.

Złożoność tła wideo jest nieco wyższa, a społeczność WordPressa lub główny zespół może to zauważyć i wprowadzić zmiany w nadchodzących wydaniach.

Jeśli masz film i chcesz przekonwertować go na gif, istnieją zasoby online, które mogą to zrobić za Ciebie. Ale przekonwertowane pliki GIF nie są zoptymalizowane i niosą ze sobą dużą wagę.

A kiedy musisz wprowadzić poprawki do filmu, który planujesz umieścić, możesz znaleźć kilka świetnych darmowych edytorów wideo. Być może trzeba będzie wyciąć, przyciąć lub powiększyć wideo, dodać tekst lub prawdopodobnie dostosować motyw kolorystyczny, aby pasował do stylu Twojej witryny.

Jeśli korzystasz z komputera Mac, możesz oczywiście skorzystać z iMovie, ponieważ jest on już wstępnie zainstalowany na komputerze (jeśli nie, możesz go pobrać za darmo). A jeśli korzystasz z systemu Windows – VSDC Free Video Editor to świetny wybór. Ma dosłownie wszystko, czego możesz potrzebować, od podstawowego zestawu narzędzi do dzielenia/przycinania po korekcję kolorów i ustawienia wstępne stylu wideo. Co więcej, jest naprawdę potężny, jeśli chodzi o formaty, i nie musisz rezygnować z jakości pliku wyjściowego.

Myślisz, że coś przegapiłem? Skomentuj poniżej i daj nam znać.

*ostatnia aktualizacja 25.02.2019