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

Ищете самый простой способ добавить видеофон в WordPress?

Хорошо сделанные фоны для видео привлекают внимание и делают бренды крутыми с самого начала. Но если сделать это плохо, видеофон замедляет работу вашего сайта, занимает место и сбивает с толку новых посетителей. Вот почему мы сделали это руководство, чтобы вы могли избежать всех ловушек и вместо этого узнать, как правильно добавить видеофон в WordPress .

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

Рекомендации по добавлению видео фона WordPress

• Размер файлов должен быть небольшим, а разрешение высоким. Ничто так не снижает производительность вашего сайта, как большие видео и изображения; однако предпочтительнее сохранять разрешение во время сжатия.
• Не переусердствуйте: слишком много видео загромождают ваш интерфейс; используйте их только для того, чтобы подчеркнуть или продемонстрировать что-то важное.
• Включите призыв к действию с дополнительной информацией: не заставляйте зрителей хотеть большего, а затем забудьте ссылку, ведущую к дополнительным подробностям.
• Избегайте звука любой ценой: это раздражает, когда все люди просто хотят просматривать ваш сайт.
• Если требуется звук, не включайте его в автовоспроизведение: предоставьте пользователям возможность воспроизводить звук.
• Используйте субтитры для видео со звуком: не все могут слушать ваш звук из-за своего местоположения или слабого слуха.
• Внешний хостинг: хостинг вашего сайта, вероятно, не предназначен для показа видео, поэтому выбирайте такие сайты, как Vimeo и YouTube, чтобы поддерживать производительность, или подумайте о специализированном видеохостинге.
• Придерживайтесь лучших форматов/разрешений: мы говорим только о MP4; минимум 720p; кодек h264.

И помните, не всем веб-сайтам нужно видео; иногда это просто делает интерфейс загроможденным, медленным и расфокусированным. Юрист, например, должен придерживаться профессиональных фотографий, а не банальных видеороликов с рукопожатиями, которые обязательно замедлят работу их веб-сайта.

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

Существует несколько методов, которые активируют функции фонового видео в WordPress.

Мы собираемся сосредоточиться на четырех различных решениях без кода:

1. Встроенный блок Cover
2. Плагин фона/заголовка
3. Ваш любимый плагин для создания страниц
4. Использование темы, которая поддерживает видеофоны или заголовки

Выполните шаги для каждого метода ниже.

Вариант 1: Встроенный блок крышки

Собственный редактор WordPress предлагает так называемый блок Cover для вставки фоновых изображений за другим содержимым, таким как текст и кнопки.

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

Шаг 1: Добавьте блок обложки

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

Шаг 2: Загрузите свое видео

Для обложки выберите кнопку « Загрузить » или « Медиатека » в зависимости от того, какую из них вы собираетесь использовать для добавления видео.

Блок « Обложка » ничего не говорит о поддержке видео, поэтому вам просто нужно выбрать видео (например, MP4) из медиатеки . Нажмите кнопку « Выбрать », как только вы отметили видео.

Шаг 3. Вставьте наложенный контент переднего плана

Теперь вы должны увидеть предварительный просмотр фонового видео. Вы можете добавлять блоки переднего плана на обложку , такие как текст или кнопки.

Шаг 4. При необходимости отредактируйте настройки обложки.

Настройки обложки включают в себя:

• Цветные наложения: идеально подходят для облегчения чтения текста
• Непрозрачность: также полезно для раскрытия содержимого переднего плана.
• Минимальная высота покрытия: иногда необходимо, чтобы фоновое видео WordPress занимало больше места.

Шаг 5: Просмотрите фоновое видео WordPress в действии

Когда вы закончите, сохраните страницу и перейдите во внешний интерфейс, чтобы увидеть фоновое видео WordPress!

Существует довольно много плагинов для добавления видеофонов WordPress, некоторые из которых предлагают полные фоны сайта, а другие предназначены для предоставления вам заголовка видео.

Вот лучшие плагины для фонового видео:

️ Наш любимый плагин Advanced WordPress Backgrounds; мы покажем вам, как добавить фоновое видео WordPress с помощью этого плагина всего за несколько шагов.

Шаг 1: Установите AWB и добавьте его блок контента

Для начала установите Advanced WordPress Backgrounds (AWB).

Перейдите на страницу, где вы хотите добавить фоновое видео.

Используя редактор WordPress, нажмите, чтобы добавить блок контента. Найдите и выберите блок Background (AWB) .

Шаг 2. Добавьте свое видео

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

Выберите « Видео » и вставьте URL-адрес видео с YouTube или Vimeo. В качестве альтернативы в плагине есть вкладка Self Hosted для загрузки локальных видео.

Шаг 3: Увеличьте высоту и ширину фона видео.

По умолчанию блок содержимого не растягивается, чтобы покрыть большую часть области страницы. Вы должны нажать кнопку « Полная высота » в редакторе. Также есть кнопка для расширения фона видео на полную ширину.

Вы также можете перетаскивать или вставлять содержимое, например текст, кнопки или изображения, поверх фонового видео.

Шаг 4. Измените настройки фона видео WordPress.

Настройте любой параметр на вкладке « Блок »: время начала, время окончания, зацикливание, постоянное воспроизведение, непрозрачность видео.

Целесообразно добавить наложение цвета фона с уменьшенной непрозрачностью; это облегчает чтение наложенного текста.

Сделайте это, перейдя на вкладку « Блок » и изменив цвет на белый или черный в разделе « Цвет фона ». Сдвиньте ползунок « Непрозрачность » немного вниз, чтобы фон по-прежнему отображался.

Шаг 5. Просмотрите результаты

В результате видео воспроизводится перед другим контентом, в идеале зацикливающимся, без звука, но при этом основное внимание уделяется содержимому переднего плана.

Вариант 3: ваш любимый плагин для конструктора страниц

Большинство компоновщиков страниц, таких как Elementor, WPBakery и Divi, предлагают фоновые функции для добавления изображения или видео фона практически к любому модулю контента.

️ Не стесняйтесь выбирать конструктор страниц по своему вкусу, но мы рекомендуем Elementor из-за его простоты использования.

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

Шаг 1. Откройте страницу в редакторе Elementor.

Перейдите на Страницы WordPress и выберите страницу, назначенную вашей домашней страницей . Нажмите кнопку « Редактировать с помощью Elementor» .

Шаг 2. Добавьте блок содержимого раздела.

Большинство модулей контента в Elementor предлагают настройки фона, но мы рекомендуем вставить раздел. Таким образом, вы можете добавить в раздел несколько элементов, например текст, изображения и кнопки. Затем вы добавляете в раздел видеофон, чтобы он находился за всем, что находится на переднем плане.

Мы добавили текст и кнопку в раздел нашего руководства. Идите вперед и выберите значок « Редактировать раздел », затем выберите вкладку « Стиль ».

Шаг 3. Вставьте фоновое изображение для видео.

Здесь вы увидите раскрывающуюся область « Фон ». Выберите параметр «Видео» рядом с « Тип фона ». Затем вставьте URL-адрес с YouTube, Vimeo или локального файла в поле « Ссылка на видео» .

Шаг 4. Измените настройки фона видео.

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

Вернувшись на вкладку « Стиль », рассмотрите возможность изменения настроек фонового видео:

• Время начала
• Время окончания
• Играть один раз
• Играть на мобильном телефоне
• Режим конфиденциальности

Кроме того, подумайте о добавлении фонового наложения — обычно нейтрального цвета, например черного или белого, и некоторых изменений непрозрачности — чтобы сделать текст, кнопки и изображения на переднем плане более заметными.

Шаг 5. Просмотрите фоновое видео WordPress на веб-интерфейсе.

Когда вы закончите, видео будет воспроизводиться за всем содержимым в разделе!

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

Различные темы WordPress предлагают встроенный заголовок, слайдер и настройки мультимедиа на всю страницу; они позволяют загружать изображение, GIF или видео, чтобы занять весь экран, чаще всего используется в качестве заголовка на вашей домашней странице.

Чтобы найти темы с функциями видеофона, выполните поиск по запросу «видеофон» на популярных торговых площадках:

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

Например, тема Colibri WP предлагает видеофоны.

Шаг 1: Установите и активируйте тему

Чтобы активировать фоновое видео, установите тему Colibri WP, затем перейдите в раздел « Внешний вид » > « Настройки Colibri » > «Начать ». Здесь вы можете активировать функцию Colibri Page Builder.

Шаг 2. Добавьте демо-сайт

Перейдите на вкладку « Демонстрационные сайты » и импортируйте выбранный вами демонстрационный шаблон.

Шаг 3. Настройте изображение героя

Перейдите в « Внешний вид » > « Настроить » и выберите значок шестеренки « Настройки » рядом с модулем « Герой ».

Шаг 4: Добавьте видео фон

Выберите вкладку « Стиль » и переключите « Фон » на « Видео» .

Наконец, либо выберите YouTube , чтобы вставить URL -адрес внешнего видео , либо Self Hosted , чтобы загрузить локальное видео.

В результате вы увидите видеофон в движении в предварительном просмотре настройщика.

Начните с идеального фона для видео

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

️ Чтобы узнать о других способах улучшить свой сайт, ознакомьтесь с нашей статьей с 10 элементами успешного дизайна домашней страницы.

По любым вопросам о видеофонах WordPress поделитесь своими мыслями в комментариях ниже.