Хочете додати відео з YouTube як повноекранний фон у WordPress?
Фонові відео можуть миттєво привернути увагу відвідувачів і утримати їх на вашому сайті, якщо їх правильно використовувати. Це робить відео чудовим вибором для цільових сторінок і сторінок продажів.
У цій статті ви дізнаєтеся, як додати відео з YouTube як повноекранний фон на вашому веб-сайті WordPress.
Навіщо використовувати відео YouTube як повноекранний фон?
Захоплюючий і привабливий відео-фон – чудовий спосіб утримати відвідувачів на вашому сайті. Коли відвідувачі вперше потрапляють на ваш сайт WordPress, у вас є лише кілька секунд, щоб привернути їхню увагу і змусити залишитися.
На сьогоднішній день багато різних тем WordPress підтримують відео фони. Однак завантаження та розміщення відео на WordPress може зайняти багато пропускної здатності.
Залежно від вашого плану хостингу WordPress, можливо, вам навіть доведеться придбати додаткове сховище.
У WPBeginner ми наполегливо рекомендуємо не завантажувати відео на WordPress.
Замість цього ви можете скористатися таким сервісом, як YouTube, і вбудувати відео в якості фону для вашого веб-сайту на WordPress. Таким чином, ви зможете виділитися серед конкурентів, не сповільнюючи роботу вашого сайту.
Давайте подивимося, як можна додати відео з YouTube в якості повноекранного фону на сайт WordPress. Ми покажемо вам два методи, і ви можете використовувати ці швидкі посилання для переходу між ними:
Спосіб 1: Використовуйте розширені фони WordPress для повноекранного фону відео (безкоштовно)
Якщо вам потрібен безкоштовний і простий спосіб додати відео YouTube як повноекранний фон, ви можете скористатисяAdvanced WordPress Backgrounds.
Цей безкоштовний плагін додає блок “Тло”, який дозволяє створити повноекранний фон, використовуючи будь-який колір, зображення або відео, включаючи відео з YouTube.
Спочатку вам потрібно встановити та активувати плагін. Якщо вам потрібна допомога, зверніться до нашого посібника зі встановлення плагінів WordPress.
Після активації просто перейдіть на сторінку або публікацію, до якої ви хочете додати відео з YouTube як повноекранний фон. Потім натисніть на кнопку “+” для додавання блоку.
У спливаючому вікні почніть вводити “Background AWB”. Коли з'явиться потрібний блок, клацніть його, щоб додати на сторінку.
У лівому меню ви побачите три вкладки для різних повноекранних фонів, які ви можете створити: “Колір”, “Зображення” і “Відео”.
Оскільки ви хочете додати відео з YouTube, перейдіть на вкладку “Відео”. Після цього виберіть вкладку “YouTube / Vimeo”.
Тепер ви можете скопіювати і вставити URL-адресу відео на YouTube, яку ви хочете використовувати у своєму блозі WordPress.
Тепер редактор блоків WordPress покаже вам, як виглядатиме цей фон.
Розширені фони WordPress змінюють розмір відео на основі вмісту, який ви додаєте поверх нього, тому не хвилюйтеся, якщо відео виглядає трохи маленьким.
За замовчуванням, відео-фон на мобільних пристроях вимкнено.
Однак, якщо ви хочете показувати фонове відео на мобільних пристроях, натисніть, щоб активувати перемикач “Увімкнути на мобільних пристроях”.
Блок буде відтворювати все відео з YouTube по циклу.
Інший варіант – відтворити певну частину відео, ввівши точний час у поля “Початок” і “Кінець”.
Ви також можете зупинити циклічне відтворення відео, вимкнувши перемикач “Цикл”.
За замовчуванням відео буде відтворюватися лише тоді, коли відвідувачі можуть бачити його у своєму браузері. Це допомагає підтримувати продуктивність вашого веб-сайту, тому зазвичай ви хочете залишити перемикач “Завжди відтворювати” вимкненим.
Коли ви вперше додаєте відео, воно відображається зі 100% непрозорістю і виглядає суцільним. Не соромтеся перетягувати повзунок “Непрозорість зображення”, щоб зробити фон відео на YouTube менш помітним.
Якщо ви експериментуєте з непрозорістю, ви також можете додати кольорове накладення.
Просто клацніть, щоб розгорнути розділ “Колір накладання”, а потім за допомогою налаштувань створіть різнокольорові накладання.
Не соромтеся використовувати інші налаштування, такі як ефект паралакса та інтервали, щоб зробити фон саме таким, яким ви хочете його бачити.
Коли ви задоволені тим, як налаштоване тло для відео YouTube, настав час додавати вміст, наприклад, посилання, тексти та зображення.
Натисніть значок “+” посередині блоку “Фон (AWB)”, щоб почати.
Відкриється спливаюче вікно, де ви можете вибрати блок, який хочете додати. Плагін Advanced WordPress Backgrounds працює з усіма стандартними блоками WordPress, тому ви можете додати будь-який вміст, який хочете.
Якщо ви задоволені його виглядом, натисніть кнопку “Оновити” або “Опублікувати”, щоб зробити сторінку живою. Якщо ви відвідаєте свій сайт на WordPress, ви побачите відео-фон в дії.
Спосіб 2: Використання Thrive Architect для додавання повноекранного відеофону (рекомендовано)
Цей метод для вас, якщо ви хочете повністю налаштувати повноекранне фонове відео або навіть легко оформити всі сторінки вашого сайту.
Найкращий спосіб додати відео з YouTube як повноекранний фон – це Thrive Architect.
Thrive Architect – це простий у використанні плагін для створення сторінок, призначений для початківців. Окрім функції фону для відео, він має функцію перетягування, яка є гнучкою у використанні, тому ви можете створити веб-сайт, який ви хочете, без зайвих клопотів.
Він також має інтелектуальні шаблони цільових сторінок, оптимізовані для конверсій, тому ваша цільова сторінка налаштована на успіх.
Ви можете прочитати наш огляд Thrive Architect для отримання додаткової інформації про Thrive Architect.
Якщо ви хочете скористатися цим методом, спочатку придбайте план Thrive Architect. Він доступний як окремий продукт або як частина Thrive Themes bundle.
Потім просто встановіть плагін. Для отримання додаткової інформації ознайомтеся з нашим посібником зі встановлення плагіна WordPress.
Після цього ви можете перейти до розділу “Сторінки” в адмінці WordPress і вибрати сторінку для редагування. Наведіть курсор на сторінку і виберіть “Редагувати за допомогою Thrive Architect”.
Далі натисніть кнопку “+” у правій частині сторінки і знайдіть елемент Background Section.
Просто натисніть на нього, щоб додати його на сторінку.
Тепер ви можете перейти в ліву частину сторінки і прокрутити вниз до розділу “Стиль фону”.
Просто активуйте перемикач “Відео-фон” і виберіть “YouTube” як джерело.
Після цього перейдіть до відео на YouTube, яке ви хочете використати як повноекранний фон.
Просто скопіюйте URL-адресу відео на YouTube ось так:
Потім вставте URL-адресу у відповідний розділ. Тепер ви повинні побачити фон на екрані.
Потім вставте URL-адресу у відповідний розділ.
Тепер ви повинні побачити фон на екрані.
Хоча фон було додано, він ще не є повноекранним.
Щоб зробити його повноекранним, вам потрібно прокрутити вгору до розділу “Основні параметри”. Потім увімкніть опції “Вміст займає всю ширину екрана”, “Підігнати висоту до екрана” та “Розтягнути за шириною екрана”.
Давайте розглянемо деякі інші варіанти. Щоб додати вміст до фону, знову натисніть кнопку “+” праворуч і перетягніть елемент.
Ви можете додавати тексти, зображення, форми, кнопки, відгуки тощо. Thrive Architect має десятки елементів, орієнтованих на конверсію, які ви можете використовувати на своєму сайті.
Якщо ви вважаєте, що колір фону недостатньо контрастує з текстом, просто поверніться до налаштувань секції “Фон”.
Потім знову прокрутіть вниз до розділу “Стиль тла” і скористайтеся опцією “Додати шар”, щоб вибрати суцільний колір. Потім ви можете вибрати колір, який буде використано як фільтр фону, і відрегулювати його непрозорість.
Закінчивши, просто натисніть “Застосувати”.
Ви також можете налаштувати поведінку прокрутки у розділі налаштувань “Тло”. Ви можете вибрати, чи зробити його статичним, липким або з паралаксом.
Ми рекомендуємо залишити його статичним, щоб фон не рухався, коли користувач прокручує відео вниз. В іншому випадку відео буде продовжувати відтворюватися, сповільнюючи роботу вашого сайту.
Наступне, що ви можете зробити, це перейти до розділу “Адаптивність”. Тут ви можете вибрати, як зробити так, щоб відео-фон відображався на мобільних і планшетних версіях вашого сайту.
Це залежить від вас, але відео займає деякий час, щоб завантажитися. Це може дратувати ваших відвідувачів, коли вони чекають, поки вони запустяться, коли вони знаходяться на пристрої з маленьким екраном.
Якщо ви задоволені повноекранним тлом відео YouTube, натисніть кнопку “Зберегти роботу”, щоб зберегти зміни.
Це все!
Тепер перейдіть на свій веб-сайт WordPress, щоб побачити, як він виглядає наживо.
Ось як виглядає наша тестова сторінка.
Бонусна порада: Додайте відеоканал YouTube у WordPress
Хочете додати більше відео на свій сайт? Хоча WordPress має вбудовані блоки для вбудовування відео, вони не є найбільш візуально привабливим способом відображення відео, особливо якщо у вас їх декілька.
Це там, де Smash Balloon YouTube Feed Pro comes in.
Smash Balloon YouTube Feed Pro – найкращий плагін для галереї YouTube. Він автоматично показує всі останні відео з вашого каналу YouTube, тому ваші відвідувачі завжди бачитимуть найновіший контент.
Просто створіть канал YouTube за допомогою простого редактора Smash Balloon, а потім додайте його на будь-яку сторінку або публікацію за допомогою шорткоду або готового блоку плагіна.
Ви також можете використовувати Smash Balloon для вбудовування плейлистів, обраного та прямих трансляцій YouTube на свій сайт WordPress.
Найкраще в Smash Balloon – це те, що він не уповільнює роботу вашого сайту. Вбудована в плагін функція кешування YouTube гарантує, що ваш сайт завжди завантажуватиметься швидко, що чудово підходить для SEO.
Для більш детальної інформації ви можете переглянути наш посібник про те, як показувати останні відео з каналу YouTube у WordPress.
Я сподіваюся, що ця стаття допомогла вам дізнатися, як додати відео з YouTube в якості фону в WordPress. Ви також можете ознайомитися з нашим посібником зі створення цільової сторінки за допомогою WordPress і нашою експертною добіркою найкращих плагінів для відеогалереї YouTube.
Якщо вам сподобалася ця стаття, будь ласка, підпишіться на наш канал YouTube для відеоуроків по WordPress. Ви також можете знайти нас у Twitter та Facebook.
