Как добавить фоновое видео на свой сайт WordPress

Видео фон - одна из самых замечательных особенностей веб-сайта. Это может сделать ваш сайт не только живым и интересным, но и отобразить больше изображений и информации. Однако держу пари, что не многие люди знают, как добавить видео-фон на свои веб-сайты. Таким образом, это полное руководство будет полезно, если вы хотите добавить видео фон на свой веб-сайт.

Используйте тему WordPress, которая поддерживает фоновое видео

Некоторые темы WordPress поддерживают отображение видео фона, поэтому вам просто нужно настроить тему, чтобы продемонстрировать ее.

Например, эта тема Clean Blocks поддерживает видео фон в области обложки заголовка. Затем вам нужно всего лишь несколько простых шагов, чтобы вставить в него видео, перейдя в Customizer, найдя раздел Header Media и следуя требованиям темы.

Большинство тем позволяют загружать видео. Кроме того, многие будут поддерживать встроенные ссылки с YouTube, как я делал выше. Это не только будет быстрее и проще, но и поможет веб-сайту легче, тем самым оптимизируя его скорость. Каждая тема будет настраиваться по-разному, поэтому вам необходимо внимательно прочитать инструкции.

Однако при использовании тем область фонового видео может быть ограничена, поскольку темы могут поддерживать видео только в определенной области. Что делать, если вы хотите добавить видео-фон в другую область? Пришло время использовать плагин для добавления видео фона на ваш сайт WordPress.

Используйте плагин для добавления видео фона на веб-сайт

Есть много плагинов, которые могут вам в этом помочь. После исследования я обнаружил, что плагин Advanced WordPress Background (AWP) очень прост в использовании для тех, кто мало разбирается в технологиях. Это также помогает красиво отображать фоновое видео и предоставляет множество параметров настройки.

Обратите внимание, что этот плагин работает только с версией WordPress 5.0 и редактором Gutenberg. Так что не забудьте обновить версию WordPress и использовать этот редактор.

Шаг 1. Установите плагин

Вы можете скачать этот плагин на wordpress.org, затем перейти в Личный кабинет > Плагин > Добавить > Загрузить плагин , загрузить, установить и активировать его.

Или в Dashboard > Plugin > Add New найдите плагин и нажмите Install > Activate .

Шаг 2. Добавьте фон для видео

Добавление видео фона аналогично вставке блока в Gutenberg. Так что, если вы знакомы с Гутенбергом, это легко. Если нет, вы можете прочитать инструкцию по использованию Gutenberg.

Перейдите на страницу или в статью, где вы хотите добавить фоновое видео, добавить новый блок и выполнить поиск по ключевому слову «awb», чтобы найти блок фона AWB.

После вставки этого блока на правой боковой панели выберите вкладку Блок, чтобы настроить его. Есть 3 варианта фона: изображение, цвет и видео. Выберите « Видео», чтобы вставить фоновое видео. Затем у вас есть 2 варианта: вставить видео с YouTube или URL-адреса Vimeo или загрузить собственные видео.

Если вы выберете первый вариант, вам просто нужно вставить ссылку в раздел URL видео .

Для второго варианта перейдите в раздел Self Hosted . Есть 3 типа видеоформатов для загрузки:

Выберите нужный формат, затем выберите существующее видео в библиотеке или загрузите новое. Вот и все.

Шаг 3. Настройте фон для видео

Отображение видео в полную высоту и добавление блока на видео

После вставки видео его рамка такая маленькая вот так. Для отображения видео с полной высотой, выберите раздел Полноразмерного на панели блока.

Ниже показан фон видео в полный рост с текстом. Вы можете настроить размер, цвет, положение и т. Д. Для текстов, как правило, на вкладке « Блок » на боковой панели. Это полезно, если вы хотите поместить это видео в заголовок или в раздел с призывом к действию.

Вы даже можете заменить тексты любым блоком. Это похоже на вставку любого блока Гутенберга.

Настройки видео

На вкладке Видео вы должны установить некоторые основные разделы, как показано ниже, для удобного отображения вашего видео фона:

(1): вы можете включить или отключить фоновое видео на мобильных устройствах.
(2) и (3): введите здесь время начала и окончания видео, чтобы отобразить желаемую часть, особенно если исходное видео слишком длинное.
(4): вы можете повторить видео, когда оно будет закончено. Я думаю, вам следует включить эту функцию, чтобы видео продолжало воспроизводиться автоматически.

Настройки изображения плаката

Прокрутив вниз, вы увидите раздел Изображение плаката . Фотография, которую вы выберете здесь, будет отображаться за 1 секунду до отображения видео. Приведенные ниже параметры позволяют настроить правильный размер и стиль изображения.

Вот результат после добавления изображения плаката.

Установить оверлей

(1) - это цвет наложения для фона видео, а (2) - это прозрачность наложения. Например, оранжевый - это основной тон моего сайта, поэтому я выбрал этот цвет для оверлея видео, чтобы он соответствовал веб-дизайну.

Что касается цветовой палитры , то это альтернатива видео. Другими словами, вы фактически переключаетесь с фонового изображения на цветной фон. Чтобы удалить этот цветной фон, нажмите кнопку «Очистить».

Установите эффекты Parallax и Mouse Parallax

На вкладке « Параллакс » вы можете включить или выключить эти эффекты и легко выбрать различные типы параллакса. Это очень красивый и интересный эффект, поэтому вы должны использовать его и выбрать подходящий стиль для своего сайта.

Эффект параллакса может быть вам знаком, а эффект параллакса мыши - нет. Это легко увидеть, если навести указатель мыши на видео, тогда сцена внутри видео тоже переместится.

Вы можете использовать этот эффект, перейдя в раздел Параллакс мыши > Включить . Затем вы можете настроить размер и скорость . Чем ниже скорость, тем быстрее движется видео. Чем меньше размер, тем больше движется видео, из-за чего создается ощущение, что видео «дергается» при перемещении по нему мыши.

Вот пример, когда я выбираю самую низкую скорость и размер.

Настройки интервала

На вкладке « Интервал » настройте расстояние от видео до поля страницы, введите параметры расстояния в разделы « Поля» и « Отступ» . Например, я ввел отступы 10 и поля 20 для всех 4 сторон видео.

Расширенные настройки

В Дополнительный CSS раздела Advanced вы можете добавить собственный код для видео фона. А секция привязки HTML позволяет использовать ссылку с ключевым словом для заголовка видео. Если вы ничего не знаете о шорткодах, можете пропустить эту часть.

И это конечный результат. Видео выглядит неплохо, не правда ли?

Последние слова

Я надеюсь, что с помощью этой очень подробной статьи вы сможете добавить видео фон на свой сайт WordPress для привлечения посетителей. Что касается плагинов AWB, вы должны использовать их с темой, которая сильно поддерживает Gutenberg, например eStar. Здесь я использовал тему eStar и плагин AWB, чтобы получить привлекательный видео-фон для обложки заголовка.

Эта идеальная комбинация может сделать видео более увлекательным, не так ли? Если вы хотите узнать больше советов по WordPress, не стесняйтесь комментировать и делиться своими мыслями под этой статьей.