Jak dodać film z YouTube jako tło w trybie pełnoekranowym w WordPress?

Czasami staramy się dodawać nowe sposoby, aby nasze witryny WordPress były bardziej angażujące i atrakcyjne wizualnie, a jednym z nich jest dodanie filmu z YouTube jako pełnoekranowego tła.

Odpowiednio wykorzystane filmy w tle mogą znacznie zwiększyć zaangażowanie odwiedzających i czas spędzony na stronie. Uważamy również, że są one świetnym sposobem na natychmiastowe przyciągnięcie uwagi odwiedzających i stworzenie niezapomnianego pierwszego wrażenia.

W tym artykule pokażemy, jak dodać film z YouTube jako pełnoekranowe tło w witrynie WordPress.

Dlaczego warto używać filmu z YouTube jako tła w trybie pełnoekranowym?

Wciągające i przyciągające wzrok tło filmowe w nagłówku to świetny sposób na zachęcenie odwiedzających do pozostania na twojej witrynie. Kiedy odwiedzający po raz pierwszy trafiają na twoją witrynę WordPress, masz tylko kilka sekund, aby przyciągnąć ich uwagę.

W dzisiejszych czasach wiele różnych motywów WordPress obsługuje tła wideo. Jednak przesyłanie i hostowanie treści wideo na WordPress może zająć dużo przepustowości.

W zależności od twojego planu hostingowego WordPress, może być nawet konieczne wykupienie dodatkowej przestrzeni dyskowej.

W WPBeginner zdecydowanie odradzamy przesyłanie twoich filmów do WordPressa.

Zamiast tego możesz skorzystać z usługi takiej jak YouTube, a następnie osadzać film jako tło Twojej witryny internetowej WordPress. W ten sposób możesz wyróżnić się na tle konkurencji, nie spowalniając swojej witryny internetowej i nie mając wpływu na wygodę użytkownika.

To powiedziawszy, zobaczmy, jak dodać film z YouTube jako tło w trybie pełnoekranowym na twojej witrynie internetowej WordPress. Pokażemy ci dwie metody i możesz użyć tych szybkich odnośników, aby nawigować między nimi:

Metoda 1: Użyj zaawansowanego tła WordPress dla pełnoekranowego trybu tła filmu (za darmo)

Jeśli szukasz darmowego i łatwego sposobu na dodanie filmowego tła, możesz skorzystać z Advanced WordPress Backgrounds.

Ta darmowa wtyczka dodaje blok Background, który umożliwia tworzenie tła w trybie pełnoekranowym przy użyciu dowolnego koloru, obrazka lub filmu, w tym filmów z YouTube.

Najpierw musisz zainstalować i włączyć wtyczkę w twoim kokpicie WordPress. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączaniu, po prostu przejdź do strony lub wpisu, w którym chcesz dodać film z YouTube jako tło w trybie pełnoekranowym. W edytorze bloków Gutenberg kliknij przycisk dodawania bloku „+”.

W wyskakującym okienku, które się pojawi, zacznij wpisywać rodzaj „Background AWB”. Kiedy pojawi się odpowiedni blok, kliknij go, aby dodać go do strony.

W menu po lewej stronie zobaczysz trzy karty dla różnych rodzajów tła o pełnej szerokości, które możesz utworzyć: Kolor, Obrazek i Film.

Ponieważ chcesz dodać film z YouTube, kliknij kartę „Wideo”. Następnie wybierz kartę„YouTube / Vimeo„.

Teraz możesz skopiować i wkleić adres URL pliku z filmem z YouTube, którego chcesz użyć na swoim blogu WordPress.

Teraz edytor bloków WordPress pokaże podgląd tego, jak to tło będzie wyglądać.

Zaawansowane tła WordPress zmieniają rozmiar filmu w oparciu o treść dodaną na wierzchu, więc nie martw się, jeśli obecny, aktualny film wygląda na nieco mały.

Domyślnie tło filmu jest wyłączone na urządzeniach mobilnych.

Jeśli jednak chcesz wyświetlać tło filmu na urządzeniach mobilnych, kliknij, aby włączyć przełącznik „Włącz na urządzeniach mobilnych”.

Po wyjęciu z pudełka blok będzie odtwarzał cały film z YouTube w trybie autoodtwarzania i w pętli.

Inną opcją jest odtworzenie określonego fragmentu filmu poprzez wpisanie dokładnego czasu w polach „Czas rozpoczęcia” i „Czas zakończenia”.

Można również zatrzymać odtwarzanie filmu w pętli, wyłączając przełącznik „Pętla”.

Domyślnie film będzie odtwarzany tylko wtedy, gdy odwiedzający widzi go w przeglądarce. Pomoże to utrzymać wydajność twojej witryny internetowej, więc zazwyczaj będziesz chciał pozostawić przełącznik „Zawsze odtwarzaj” wyłączony.

Po pierwszym dodaniu filmu jest on wyświetlany z kryciem 100%, dzięki czemu wygląda jednolicie. Możesz przeciągnąć suwak „Krycie obrazka”, aby tło filmu z YouTube było bardziej subtelne.

Jeśli eksperymentujesz z kryciem, możesz również spróbować dodać kolorową nakładkę.

Wystarczy kliknąć, aby rozwinąć sekcję „Kolor nakładki”, a następnie użyć ustawień, aby utworzyć nakładki w różnych kolorach.

Zachęcamy do zapoznania się z innymi ustawieniami, takimi jak efekt paralaksy i odstępy, aby tło wyglądało dokładnie tak, jak chcesz.

Gdy jesteś zadowolony z konfiguracji tła filmu na YouTube, nadszedł czas, aby zacząć dodawać treści, takie jak odnośniki, teksty i obrazki.

Aby rozpocząć, kliknij ikonkę „+” na środku bloku tła (AWB).

Spowoduje to otwarcie wyskakującego okienka, w którym możesz wybrać blok, który chcesz dodać. Wtyczka Advanced WordPress Backgrounds współpracuje ze wszystkimi standardowymi blokami WordPress, dzięki czemu możesz dodać dowolną treść.

Jeśli dodasz tekst na górze bloku, pamiętaj tylko, aby zmienić kolor tekstu tak, aby dobrze komponował się z tłem filmu.

Gdy będziesz zadowolony z wyglądu strony, kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby ją uruchomić. Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress, zobaczysz tło filmowe w działaniu.

Metoda 2: Użyj Thrive Architect, aby dodać pełnoekranowe tło filmu (zalecane)

Jeśli chcesz w pełni dostosować swój pełnoekranowy tryb tła filmu lub nawet łatwo zaprojektować wszystkie strony w twojej witrynie internetowej, to ta metoda jest dla ciebie.

Najlepszym sposobem na dodanie filmu z YouTube jako tła w trybie pełnoekranowym jest Thrive Architect.

Thrive Architect to łatwa w użyciu wtyczka do tworzenia stron stworzona z myślą o początkujących użytkownikach. Oprócz funkcji tła filmowego, posiada ona funkcję przeciągnij i upuść, która jest elastyczna w użyciu, dzięki czemu możesz stworzyć witrynę internetową, którą chcesz bez żadnych kłopotów.

Ponadto zawiera inteligentne szablony stron docelowych, które są zoptymalizowane pod kątem konwersji, dzięki czemu Twoja strona docelowa jest przygotowana na sukces od samego początku.

Aby uzyskać więcej informacji na temat Thrive Architect, możesz przeczytać naszą recenzję Thrive Architect.

Jeśli chcesz skorzystać z tej metody, najpierw zakup plan Thrive Architect. Jest on dostępny jako samodzielny produkt lub jako część pakietu Thrive Themes.

Następnie wystarczy zainstalować wtyczkę. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Następnie możesz przejść do „Strony” w obszarze administracyjnym WordPress i wybrać stronę do edycji. Najedź kursorem na stronę i wybierz opcję „Edytuj za pomocą Thrive Architect”.

Następnie kliknij przycisk „+” po prawej stronie i znajdź element Background Section.

Wystarczy na nią kliknąć, aby dodać ją do strony.

W tym momencie możesz przejść do lewej strony i przewinąć w dół do sekcji Styl tła.

Tutaj wystarczy włączyć przełącznik „Tło filmu” i wybrać „YouTube” jako źródło.

Następnie przejdź do filmu na YouTube, którego chcesz użyć jako tła w trybie pełnoekranowym.

Wystarczy skopiować adres URL filmu z YouTube w ten sposób:

Następnie wklej adres URL w odpowiedniej sekcji.

Na ekranie powinno być teraz widoczne tło.

Tło zostało dodane, ale nie jest to jeszcze tryb pełnoekranowy.

Aby upewnić się, że jest to tryb pełnoekranowy, należy przewinąć do sekcji Opcje główne. Następnie włącz opcje „Treść obejmuje całą szerokość ekranu”, „Dopasuj wysokość do ekranu” i „Rozciągnij, aby dopasować do szerokości ekranu”.

Przyjrzyjmy się jeszcze kilku opcjom. Aby dodać treść do twojego tła, wystarczy ponownie kliknąć przycisk „+” po prawej stronie i przeciągnąć i upuścić element.

Możesz dodawać teksty, obrazki, formularze, przyciski, referencje i wiele więcej. Thrive Architect posiada dziesiątki elementów skoncentrowanych na konwersji, które możesz wykorzystać na swojej witrynie internetowej.

Jeśli uważasz, że kolor tła nie kontrastuje wystarczająco dobrze z tekstem, po prostu wróć do ustawień sekcji tła.

Następnie ponownie przewiń w dół do opcji Styl tła i w opcji Dodaj warstwę wybierz jednolity kolor. Następnie możesz wybrać kolor do użycia jako filtr tła i dostosować krycie według własnego uznania.

Po zakończeniu kliknij przycisk „Zastosuj”.

Kolejną rzeczą, którą można dostosować w ustawieniach sekcji tła, jest zachowanie przewijania. Możesz wybrać, czy ma być statyczny, przypięty czy paralaksowy.

Zalecamy zachowanie statycznego obrazu, aby tło nie poruszało się, gdy użytkownik przewija stronę w dół. W przeciwnym razie film będzie odtwarzany, co może spowolnić twoją witrynę internetową.

Następną rzeczą, którą możesz zrobić, jest przejście do sekcji Responsive. Tutaj możesz wybrać, czy tło filmu ma być wyświetlane na mobilnych i tabletowych wersjach twojej witryny internetowej.

To zależy od Ciebie, ale pamiętaj, że wczytywanie filmów zajmuje trochę czasu. Oczekiwanie na ich uruchomienie może być irytujące dla odwiedzających Twoją stronę, gdy korzystają oni z urządzenia z małym ekranem.

Gdy już będziesz zadowolony z trybu pełnoekranowego tła filmu YouTube, po prostu kliknij przycisk „Zapisz pracę”, aby zapisać twoje zmiany.

To wszystko!

Teraz przejdź do twojej witryny internetowej WordPress, aby zobaczyć, jak wygląda na żywo.

Oto jak wygląda nasza strona testowa.

Alternatywa: Dodaj animowane tło w WordPress

Chociaż tła filmowe mogą być atrakcyjne wizualnie, mogą również spowolnić szybkość wczytywania twojej witryny internetowej. Jeśli chcesz skorzystać z alternatywnej opcji, możesz zamiast tego dodać animowane tło.

Najlepszym sposobem na to jest SeedProd, potężna wtyczka do tworzenia stron typu „przeciągnij i upuść” dla WordPress.

Umożliwia łatwe dodawanie oszałamiających animowanych teł do twojej witryny internetowej za pomocą particle.js. Particle.js to lekka biblioteka JavaScript, która tworzy interaktywne animacje cząsteczkowe.

Więcej informacji można znaleźć w naszym przewodniku na temat dodawania animowanego tła w WordPress.

Dodatkowa wskazówka: Dodaj kanał filmów YouTube Feed w WordPressie

Chcesz dodać więcej filmów do swojej witryny internetowej? Chociaż WordPress ma wbudowane bloki osadzania filmów, nie są one najbardziej atrakcyjnym wizualnie sposobem wyświetlania filmów, zwłaszcza jeśli masz ich wiele.

Tutaj właśnie wkracza Smash Balloon YouTube Feed Pro.

Smash Balloon YouTube Feed Pro to najlepsza wtyczka do galerii YouTube na rynku. Automatycznie wyświetla wszystkie najnowsze filmy z twojego kanału YouTube, dzięki czemu odwiedzający zawsze zobaczą najnowsze treści.

Wystarczy utworzyć kanał YouTube Feed za pomocą łatwego edytora Smash Balloon, a następnie dodać go do dowolnej strony lub wpisu za pomocą krótkiego kodu lub gotowego bloku wtyczki.

Możesz także użyć Smash Balloon, aby osadzać listy odtwarzania YouTube, ulubione i transmisje na żywo na twojej witrynie internetowej WordPress.

Najlepszą rzeczą w Smash Balloon jest to, że nie spowalnia twojej witryny. Wbudowana we wtyczkę funkcja buforowania pamięci podręcznej YouTube sprawi, że twoja witryna zawsze będzie się szybko wczytywać, co jest świetne dla SEO.

Więcej szczegółów można znaleźć w naszym przewodniku krok po kroku, jak wyświetlać najnowsze filmy z kanału YouTube w WordPress.

Mamy nadzieję, że ten poradnik pomógł ci dowiedzieć się, jak dodać film z YouTube jako tło w WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat tworzenia wiralowej strony docelowej z listą oczekujących za pomocą WordPress a oraz z naszym wyborem najlepszych kreatorów motywów WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.