Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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

Odpowiednio wykorzystane filmy w tle mogą natychmiast przyciągnąć uwagę odwiedzającego i zatrzymać go na twojej witrynie internetowej. To sprawia, że filmy są doskonałym wyborem dla stron docelowych i stron sprzedaży.

W tym artykule pokażemy, jak dodać film z YouTube jako tło w trybie pełnoekranowym na twojej witrynie internetowej WordPress.

How to add YouTube video as fullscreen background in 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.

How to add a fullscreen video to a WordPress blog post or page

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.

Getting the URL for a YouTube video

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.

How to customize a YouTube background video in WordPress

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”.

Showing a YouTube background on mobile devices

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”.

How to add a YouTube background video to a website

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.

Changing the opacity settings for a YouTube video

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.

Adding an overlay to a video background

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).

Adding blocks to a YouTube background video

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.

An example of a YouTube video background in WordPress

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.

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”.

Clicking Edit with Thrive Architect on a page

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

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

Adding a Background section in Thrive Architect

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.

Selecting a video background style in Thrive Architect

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:

Getting the URL for a YouTube video

Następnie wklej adres URL w odpowiedniej sekcji.

Na ekranie powinno być teraz widoczne tło.

Pasting video background URL in Thrive Architect

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”.

Adjusting the video background height and width in Thrive Architect

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”.

Changing the color overlay opacity in Thrive Architect

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ą.

Adjusting the scroll behavior of the video background in Thrive Architect

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.

Adjusting the responsiveness behavior of the video background in Thrive Architect

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.

Video background example made with Thrive Architect

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.

The particle background's advanced settings in SeedProd

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.

Embedding a YouTube playlist using Smash Balloon

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.

Creating a YouTube feed using the Smash Balloon social media plugin

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

14 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed

    This is very simple yet powerful idea to grab the visitors attention by playing something in the background.
    I have used it with page builders and never knew that simple method directly from Gutenberg is also available to use.
    it is specially helpful for landing and sales pages which makes intuitive on visitors part to engage with call to action button.
    Thank for illustrating the simple steps.

  3. THANKGOD JONATHAN

    I have an uploaded video on my Wordpress library and I have been thinking of making it like a background video on my blog.
    Please how do I do it properler so that it does not affect my website speed? Or must I upload it on youtube and then embed it on my site?

  4. Ralph

    I want to use it as a background for my portfolio/business contact page, but does it slow down the website itself, or does it load it straight from YouTube and doesn’t slow down the website itself?

    Previous comments are old but still concerning.

    • WPBeginner Support

      The videos should load as an embed from YouTube which shouldn’t cause a slowdown on your site.

      Administrator

    • Jiří Vaněk

      I shouldn’t worry about the slowdown of the website itself. The issue here lies mainly in slow connectivity and data on these devices. The first problem arises with mobiles that don’t have strong connectivity. It will lag, appear unprofessional, and perhaps lead the user to leave. The second issue is that if someone has a limited data plan, they’ll complain about how much data such a page consumes. Personally, I’d probably avoid this.

  5. Jiří Vaněk

    I can learn something new again with Gutenberg. I’ve always known how to do this only in Elementor, where adding a video background is really simple. Now I know how to do it outside of Elementor as well.

    • WPBeginner Support

      Glad we could share the process :)

      Administrator

  6. T_Lind

    Great article!

    But I cannot add the video background to a single page, like you describe. I’m only able to add a youtube video to my homepage, which limits the extend to which the app can be used.

    Ideas?

  7. Tobi

    Hi, this plugin was a disaster to my website.

    It consumed all the resources and for hours I was on the phone with my hosting company trying to battle why I was getting the errors on this screenshots below:

    After hours, we finally traced them to the plugin i recently installed.

    We had to remove it from the file manager and everything is back to normal now.

    It takes up a lot of resources unless you have a super hosting account, i don’t advise.

    • WPBeginner Support

      Hi Tobi,

      The plugin shouldn’t consume too many resources because it loads video from YouTube not from your website. The first screenshot you shared points to a database connection error. We hope everything works fine for you now, however, if you still see issues on your website then it is most likely a hosting issue.

      Administrator

  8. Carlos Leon

    Does it play on mobile phones?

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.