Добавление видео на фон страницы | Центр Поддержки
Удивите своих посетителей и добавьте художественные детали на свой сайт с помощью видеофона. Вы можете загрузить собственное видео, добавить бесплатное видео Wix или купить профессиональное видео Shutterstock.
Содержание
- Добавление видео в фон страницы
- Часто задаваемые вопросы
Добавление видео в фон страницы
Начните с загрузки видео для фона страницы.
Wix предлагает множество бесплатных ярких опций, поэтому вы можете выбрать то, что идеально подходит именно вашему бренду и его внешнему виду.
Чтобы добавить видео на фон страницы:
- Перейдите на соответствующую страницу в редакторе.
- Нажмите Дизайн сайта в левой части редактора.
- Наведите курсор на фон страницы и нажмите Настроить.
- Выберите видео.
- Выберите, что вы хотите сделать:
- Загрузите собственное видео:
- Нажмите Загрузить файлы.
- Выберите видео с компьютера.
- Нажмите Изменить фон.
- Нажмите Загрузить файлы.
- Добавьте бесплатное видео Wix:
- Нажмите Медиа от Wix.
- Выберите видео.
- Нажмите Изменить фон.
- Купите видео Shutterstock:
- Нажмите Shutterstock.
- Выберите видео.
- Нажмите Купить видео.
- Загрузите собственное видео:
- (Необязательно) Нажмите Применить к другим страницам, чтобы добавить фон на другие страницы вашего сайта.
Вопросы и ответы
Выберите вариант ниже, чтобы узнать больше о видеофоне.
Есть ли звук у видеофона?
Видео фон воспроизводится без звука. Если вы хотите отображать видео со звуком, мы рекомендуем использовать другой элемент, например Wix Video, галерею Wix Pro Gallery или видеоплеер.
Как видеофон работает на мобильном сайте?
Фоновое видео будет автоматически отключено в мобильной версии сайта. Чтобы включить его или выбрать другое видео для фона, повторно выберите видео в мобильном редакторе. Подробнее
Какие соотношения сторон экрана я могу использовать для видеофона?
Мы делаем все возможное, чтобы адаптировать видео к любому формату. Однако нет гарантии, что ваше видео будет выглядеть корректно или правильно воспроизводиться, если вы загружаете особенно необычное соотношение сторон, например 19:321.
Что еще нужно знать?
Когда вы добавляете видео в качестве фона страницы, мы рекомендуем учитывать следующие моменты:
- Загрузка видео занимает несколько минут независимо от скорости вашего интернет-соединения. По мере обработки видео файл перекодируется, что означает преобразование и изменение размера для воспроизведения в самом высоком качестве на любом экране. При загрузке длинных или высококачественных видео время обработки может увеличиться. Видео не появится на сайте, пока не будет завершена загрузка. Для получения наилучших результатов ознакомьтесь с рекомендациями по работе с видеофайлами.
- Для воспроизведения больших или высококачественных видеофайлов может потребоваться несколько секунд, что может привести к увеличению времени загрузки вашего сайта.
Видео не появится на сайте, пока не будет завершена загрузка. Для получения наилучших результатов ознакомьтесь с рекомендациями по работе с видеофайлами.Адаптивное видео для фона блока
Подключаем библиотеку jQuery и плагин jquery.vide.js и просто добавляем атрибут data-vide-bg=»path/video» к нужному блоку.
Где: path — папка с файлами video.jpg, video.mp4, video.ogv и video.webm
Пример:
<div data-vide-bg=»/demo/vide/video»> <div> Адаптивное видео для фона </div> </div>
<div data-vide-bg=»/demo/vide/video»> <div> Адаптивное видео для фона </div> </div> |
Также можно использовать атрибут data-vide-options для настроек видео.
По умолчанию они выглядят так:
| volume: 1 | громкость (от 0 до 1) |
| playbackRate: 1 | скорость видео (медленнее быстрее) |
| muted: true | отключение звука (true, false) |
| loop: true | повтор (true, false) |
| autoplay: true | автопроизведение (true, false) |
| позиционирование видео, также как background-position для CSS | |
| posterType: ‘detect’ | Тип постера («detect» — автоматически; «none» — без постера; «jpg», «png», «gif»,… — точное расширение. |
| resizing: true | масштабирование видео под размеры блока (true, false) |
| bgColor: ‘transparent’ | цвет для фона блока с видео |
| className: ‘ ‘ | класс для блока с видео |
Пример:
<div data-vide-bg=»/demo/vide/video» data-vide-options=»playbackRate: 0.
<div data-vide-bg=»/demo/vide/video» data-vide-options=»playbackRate: 0.1, position: ‘0 100%'»> <div> Адаптивное видео для фона </div> </div> |
Для того чтобы сделать видеофон на весь экран, нужно прописать атрибут data-vide-bg к тегу body и задать ему 100% высоту и ширину:
Пример:
<!doctype html> <html> <title>Адаптивный видеофон во весь экран / Atuin</title> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <script src=»http://code.jquery.com/jquery-1.12.4.min.js» type=»text/javascript»></script> <script src=»http://atuin.ru/demo/vide/jquery.vide.js»></script> <style> html, body{ height:100%; width:100%; margin:0; display:table; } div { font-size:42px; text-align:center; vertical-align:middle; font-family:verdana; color:#BFE2FF; display:table-cell; } </style> <body data-vide-bg=»/demo/vide/video»> <div>Адаптивный видеофон во весь экран</div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <html> <title>Адаптивный видеофон во весь экран / Atuin</title> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <script src=»http://code. <script src=»http://atuin.ru/demo/vide/jquery.vide.js»></script> <style> html, body{ height:100%; width:100%; margin:0; display:table; } div { font-size:42px; text-align:center; vertical-align:middle; font-family:verdana; color:#BFE2FF; display:table-cell; } </style> <body data-vide-bg=»/demo/vide/video»> <div>Адаптивный видеофон во весь экран</div> </body> </html> |
Автор скрипта: VodkaBears
Файлы и подробное описание тут
Как сделать фоновое видео для главной страницы вашего сайта
Clipchamp — бесплатный онлайн-редактор видеоПопробуйте бесплатно
Поделитесь этой публикацией
На этой странице
- Что такое фоновое видео?
- Примеры фонового видео
- Как создать фоновое видео для главной страницы вашего веб-сайта
- Хотите узнать больше?
youtube.com/embed/V6p36RiRUxs» sandbox=»allow-scripts allow-same-origin allow-presentation» allow=»accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture» frameborder=»0″ allowfullscreen=»»> По всему Интернету статические страницы веб-сайтов уходят в прошлое, поскольку привлекательные видеофоны становятся все более популярными. Видеофон при правильном использовании может привлечь внимание посетителей и задать тон и настроение веб-сайта. Это также может привести к конверсиям — по данным Forbes, включение видео на целевую страницу может увеличить коэффициент конверсии на 80 процентов.
С такой статистикой, почему бы вам не попробовать? В этом блоге вы найдете советы и рекомендации по выбору и созданию фонового видео для главной страницы вашего сайта.
Что такое фоновое видео?
Примеры фонового видео.
Как создать фоновое видео для главной страницы вашего сайта.
Что такое фоновое видео?
Как следует из названия, фоновое видео — это видео, которое воспроизводится на фоне вашего веб-сайта.
Чаще всего они расположены на главной странице веб-сайта, поскольку являются отличным инструментом для передачи посетителям идентичности и истории бренда. В отличие от обучающих видеороликов или демонстраций продуктов, цель фоновых видеороликов — продвигать внешний вид и настроение, а не информацию. Они часто бывают короткими (до 30 секунд), содержат едва заметный звук или вообще не содержат его, а также содержат мало текста или вообще не содержат его.
Примеры фонового видео
Чтобы помочь вам вдохновиться при создании фонового видео, мы собрали несколько замечательных примеров веб-сайтов, на которых используется фоновое видео.
Mediaboom
Mediaboom — это агентство цифрового маркетинга, которое использует фоновое видео на своей домашней странице, чтобы показать информацию о своей компании. Делая видео черно-белым, текст поверх носителя не теряется и по-прежнему легко читается. Отображая различные аспекты своей компании в видео, посетители могут общаться с компанией на более глубоком уровне, а не просто читать вкладку «О нас».
В немом видео показаны клиент и сотрудник, их рабочее пространство, офисы и технологии, используемые для создания и демонстрации их услуг.
Venem 1.0
Venem 1.0 — австралийский модный лейбл, демонстрирующий фоновое видео в другом свете и форме. Отображение предварительного просмотра новых поступлений с помощью видео — отличный способ побудить посетителей изучить и нажать на CTA. Фоновое видео креативно и увлекательно.
The Cliffs
Компания The Cliffs, занимающаяся недвижимостью, использует классический подход к своему фоновому видео. Их видео рассказывает историю о семи частных роскошных жилых комплексах, демонстрируя окружающую дикую природу, сельское хозяйство и мероприятия на свежем воздухе. Добавление простого текста придает фоновому видео глубину. Поскольку веб-сайт просто показывает посетителям то, что они могут предложить, видео дает зрителям визуально запоминающиеся впечатления.
Project Skin MD
Project Skin MD выводит фоновое видео на совершенно новый уровень, демонстрируя повествование на протяжении всего видео.
Начальная сцена — это клиент, который входит в клинику и регистрируется на стойке регистрации. Затем история начинает рассказывать, какой опыт могут ожидать клиенты при посещении. Помещения, персонал, средства по уходу за кожей, лазер, продукты для продажи и счастливое обслуживание клиентов показаны на протяжении всего видео. Опять же, здесь минимум текста, а один и тот же слоган отображается поверх видео на протяжении всего видео.
Как создать фоновое видео для главной страницы вашего веб-сайта
Владельцы сайтов, не обладающие особым опытом в создании веб-сайтов или электронной коммерции, могут легко добавить видеофон на свой сайт. Вам не нужно иметь профессиональные навыки редактирования или даже дорогостоящее оборудование для фотосъемки.
Clipchamp — это не только бесплатный и простой в использовании видеоредактор, но и обширная библиотека стоковых материалов, наполненная профессиональными видеоматериалами. Чтобы показать вам, как извлечь из этого максимальную пользу, мы создали пошаговое руководство о том, как создавать фоновые видеоролики для главной страницы вашего веб-сайта.
Шаг 1. Начните с создания учетной записи Clipchamp
Войдите в существующую учетную запись Clipchamp или зарегистрируйтесь бесплатно.
Шаг 2. Создайте новый проект
Нажмите кнопку Создать видео на левой боковой панели. Выберите один из пяти различных форматов видео и выберите тот, который лучше всего подходит для вашего проекта. Мы рекомендуем использовать широкоэкранный формат с соотношением сторон 16:9 при загрузке на домашнюю страницу веб-сайта в качестве фонового видео.
Шаг 3. Добавьте личные видеоматериалы или стоковые видеоматериалы
Нажмите кнопку Stock на левой панели инструментов и прокрутите варианты видеоматериалов. Добавьте отснятый материал в свою библиотеку, нажав кнопку + Добавить в правом верхнем углу видео. Выбранные клипы будут автоматически загружены в вашу медиатеку. Кроме того, вы можете добавить свои собственные кадры, нажав кнопку Добавить медиа на левой панели инструментов, а затем импортировать видеофайлы со своего компьютера.
Шаг 4. Добавление и редактирование материалов на временной шкале
Перетащите видеозапись на временную шкалу. Поместите каждый клип в предпочитаемую последовательность. Если вы уроните клип не в том месте, не волнуйтесь. Вы можете перемещать их столько раз, сколько захотите. Теперь вы можете обрезать продолжительность клипа, используя инструмент «Ножницы» или перетаскивая зеленые боковые полосы клипов. Измените его цветовой баланс, добавьте фильтр или оставьте как есть. Мы рекомендуем снизить экспозицию клипов или сделать цвет черно-белым, чтобы текст выделялся для посетителей.
Шаг 5. При необходимости добавьте движущиеся титры
Пришло время добавить текст. Конечно, вам не нужно ничего добавлять. Нажмите Текст на левой боковой панели и выберите заголовок, который вы предпочитаете. Перетащите заголовок на временную шкалу над определенным клипом. Вы можете изменить длину текста, перетаскивая зеленую боковую панель влево и вправо.
После размещения в правильном месте настройте текст и измените размер, цвет и положение.
Шаг 6. Экспортируйте проект
Нажмите кнопку Экспорт в правом верхнем углу редактора. Здесь вы можете выбрать настройки разрешения, в котором вы хотите загрузить свой проект. Для загрузки веб-сайта мы рекомендуем 1080p и выберите сжать мой размер файла для более быстрой загрузки. Наконец, нажмите кнопку Продолжить и подождите, пока ваше видео будет экспортировано. Отсюда вы можете сохранить видео на свой компьютер или поделиться им напрямую в социальных сетях.
Хотите больше?
Не забудьте посмотреть другие наши обучающие видео и блоги, чтобы узнать больше советов и рекомендаций по созданию потрясающих видео!
Поделиться этой публикацией
Вернуться в блог Clipchamp
Когда и как добавлять их на свой веб-сайт
Отображение видео в качестве фона вашего веб-сайта — это верный способ оказать сильное влияние на ваших посетителей.
Хотя анимированные или видеофоны подходят не для всех веб-сайтов, если они хорошо подходят для типа сайта, который вы создаете, и вы правильно его выполняете, то они действительно могут помочь создать запоминающееся первое впечатление на вашу целевую аудиторию.
Поскольку видеофоны — это тенденция веб-дизайна, которая еще не достигла точки насыщения, это эффект, который вы все еще можете использовать, чтобы выделиться из толпы и привлечь внимание ваших посетителей.
К счастью, как пользователь WordPress, у вас есть несколько способов легко добавить видеофоны на весь сайт или отдельные записи и страницы, а также создать полноэкранные видео-слайдеры с расширенными анимационными эффектами. Если вы используете тему Divi, вам будет приятно узнать, что добавление видеофона на ваш веб-сайт WordPress различными способами не может быть проще.
Однако добавление этой функции на ваш веб-сайт — это нечто большее, чем просто загрузка видеофайла в вашу медиатеку WordPress и вставка на ваши страницы.
В этой статье мы рассмотрим, когда вы можете захотеть использовать видеофоны, где вы можете найти подходящие файлы и как вы можете добавить их на свой веб-сайт WordPress.
Тема Divi с фоновым видео
- 1 Стоит ли использовать видеофоны на своем сайте?
- 2
Где найти видео для фона вашего сайта
- 2.1 Бесплатные видео, размещенные на YouTube и Vimeo
- 2.2 Библиотеки стокового видео
- 3 Как загрузить видеофайлы на ваш сайт WordPress
- 4
Как добавить фоновое видео на свой сайт с помощью Divi
- 4.1 Создание слайд-шоу с фоновым видео
- 4.2 Добавление раздела фонового видео на страницу
- 5
Плагины для других тем WordPress
- 5.1 mb.YTPlayer для фоновых видео
- 5.2 Легкий фон для видео WP
- 6 Заключение
Стоит ли использовать фоновое видео на своем веб-сайте?
Фоновые видео лучше всего использовать на веб-сайтах, которые стремятся произвести большое первое впечатление на своих посетителей.
Сам видеоконтент не всегда является самым важным аспектом, а скорее его влияние на зрителя при отображении в качестве фона вашего сайта.
Поскольку здесь речь идет о фоновом видео, а не о приветственном видео или другом видеоконтенте переднего плана, в большинстве случаев точные кадры видео будут скрыты. Это может сыграть вам на руку, так как дает вам некоторую свободу выбора типа видеоконтента, который вы используете на своем веб-сайте. Отснятый материал не должен быть слишком тесно связан с темой вашего веб-сайта, при условии, что общий вид видео соответствует эстетике вашего бренда и общему дизайну вашего веб-сайта.
Вы можете добавить фоновое видео в любую часть вашего веб-сайта, от главной страницы до отдельных сообщений и страниц на вашем сайте, вплоть до определенных элементов страницы. Однако в большинстве случаев именно веб-сайты со статической фиксированной домашней страницей, а не с традиционной конфигурацией блога, лучше всего подходят для полноэкранного видеофона.
Может возникнуть соблазн начать использовать эту функцию на своем веб-сайте только потому, что вы можете это сделать. Однако в большинстве случаев лучше проявить некоторую сдержанность и по-настоящему подумать, действительно ли это лучший выбор для текущего дизайна вашего веб-сайта, контента, который вы публикуете, или вашей целевой аудитории.
Однако, если вы считаете, что видеофоны хорошо подходят для вашего проекта, давайте посмотрим, где вы можете найти кадры хорошего качества для своего веб-сайта, прежде чем мы перейдем к тому, как добавить их на свой веб-сайт.
Где найти видео для фона вашего сайта
Съемка или создание собственного видеоматериала для использования в качестве фона на веб-сайте — отличный вариант. Тем не менее, не у всех есть навыки, оборудование или тематика, чтобы создавать правильный тип контента для своего веб-сайта.
К счастью, в настоящее время существует множество онлайн-ресурсов, предлагающих высококачественные бесплатные видеоматериалы по разным ценам.
Хотя ваш бюджет в значительной степени будет определять качество и широту доступного вам контента, можно найти видео с высоким разрешением, которые будут хорошо работать в качестве фонового видео, не нарушая банк.
Вот несколько мест, где вы можете найти контент для фонового видео:
Видео с Vimeo
бесплатных видео, размещенных на YouTube и Vimeo
На YouTube и Vimeo размещено бесчисленное количество видеороликов, охватывающих все мыслимые темы. Большинство методов отображения видеофонов на вашем веб-сайте WordPress дают вам возможность использовать одну из этих записей в качестве исходного материала.
Несмотря на то, что вы сможете найти любой тип видео на любом из этих двух крупных хостинговых сайтов, использование этого контента на вашем веб-сайте имеет некоторые недостатки. Во-первых, видео, на которое вы ссылаетесь, может однажды стать недоступным. Это может быть связано с тем, что он был удален владельцем, отключен поставщиком услуг или по многим другим причинам.
Еще один негативный аспект использования видео, размещенного на таких сайтах, как Vimeo или YouTube, заключается в том, что вы можете непреднамеренно отображать рекламу на своем веб-сайте. Хотя некоторые варианты добавления видеофонов на ваш веб-сайт могут решить эту проблему сейчас, это может не остаться навсегда. Кроме того, поскольку YouTube отображает ссылки на похожие видео в конце каждого элемента, они также могут быть размещены на вашем веб-сайте.
Кроме того, на этих бесплатных видеохостингах вы часто не можете контролировать качество воспроизведения видео. Поскольку качество может упасть до довольно низкого уровня, это может оказать реальное влияние на впечатление, которое ваши видеофоны производят на посетителей.
Однако стоит отметить, что услуга Vimeo Pro – это хорошая альтернатива самостоятельному размещению видео, и мы более подробно рассмотрим ее в следующем разделе.
Хранилище видеоблоков
Библиотеки стоковых видео
Хотя в настоящее время есть много мест, где вы можете бесплатно использовать изображения без лицензионных отчислений для своего веб-сайта, этого еще нельзя сказать о видео.
Тем не менее, появилось несколько мест, где вы можете бесплатно найти стоковые видеоматериалы для использования на своем веб-сайте:
- Видео: более 2000 совершенно бесплатных HD-видеоматериалов и анимированной графики для любого проекта.
- Video Hive: на этом рынке Envato можно найти очень доступную коллекцию из более чем 163 000 бесплатных видеороликов.
- Video Blocks: большая коллекция видео без лицензионных отчислений, которые идеально подходят для видеофонов, распределенных по многим категориям, с ценами от 49 долларов США и доступными годовыми тарифными планами.
- Shutterstock: огромная коллекция стоковых видео без лицензионных отчислений на любой бюджет.
- iStock: больше высококачественных стоковых видео премиум-класса, охватывающих ряд категорий.
- Pond5: стоковые видеоролики без лицензионных отчислений по цене от 1 доллара и бесплатный клип недели.
- Movie Tools: коллекция бесплатных видеороликов разного качества.
- Stock Footage for Free: более бесплатное использование видеоклипов
Как видите, хотя вы, возможно, и не сможете найти бесплатное видео того же качества, что и изображения, доступного контента предостаточно. Благодаря очень доступным видеофайлам, доступным на таких сайтах, как Video Hive и Pond5, большинство проектов должны быть в состоянии оправдать стоимость включения хотя бы одного фонового видео.
Как загрузить видеофайлы на ваш сайт WordPress
Если вы планируете использовать видеофайл, который вы загрузили или создали сами, а не тот, который кто-то еще загрузил на сайт обмена видео, такой как YouTube, вам нужно будет разместить его где-нибудь, чтобы он был доступен вашим посетителям. .
Медиатека WordPress
Хотя у вас может возникнуть соблазн загрузить файл прямо в медиатеку WordPress, сохранив его на сервере веб-хостинга, часто это не лучшее решение. Поскольку тип видео, которое вы обычно используете в качестве фона веб-сайта, часто имеет большой размер файла, это может повлиять на производительность вашего сайта.
В зависимости от типа веб-хостинга, который вы используете, загрузка этих больших файлов может привести к тому, что вы рискуете приостановить действие своей учетной записи или понести дополнительные расходы из-за дополнительной потребляемой полосы пропускания при каждой загрузке видео.
По этим причинам рекомендуется искать внешний сервис для размещения вашего видеоконтента. Один из вариантов — использовать такой сервис, как Vimeo Pro. Однако Vimeo Pro — не самый дешевый вариант, и другие сервисы, такие как Rackspace, могут быть лучшим вариантом для большинства пользователей. Эти службы дают вам место для загрузки ваших видео, прежде чем вы вставите их на свой веб-сайт.
Другие преимущества использования видеохостинга премиум-класса заключаются в том, что ваш контент может быть защищен, чтобы предотвратить его загрузку без вашего согласия.
Если вы собираетесь загружать видео на свой веб-сайт WordPress, вы можете столкнуться с ограничением на загрузку, если файлы превышают определенный размер.
К счастью, это ограничение можно увеличить (хотя у вашего веб-хостинга могут быть свои собственные ограничения), и вы можете найти инструкции о том, как это сделать, здесь. Бесплатный плагин «Увеличить максимальный размер загружаемого файла» также дает вам быстрый и простой способ увеличить ограничение размера файла на вашем веб-сайте WordPress.
Теперь, когда вы знаете, где найти подходящие видео и как сделать их доступными для использования на своем веб-сайте, давайте посмотрим, как вы можете установить их в качестве фона для своего контента.
Как добавить фоновое видео на свой сайт с помощью Divi
Divi дает вам два простых способа добавить видеофоны на ваш сайт WordPress. Один из вариантов — установить фон раздела страницы для отображения видео. В то время как другой — создать слайд-шоу, содержащее слайды с видеофоном.
Раздел полной ширины с фоновым видео
Поскольку Divi позволяет создавать разделы полной ширины для ваших пользовательских макетов страниц, вы можете использовать эту функцию, чтобы легко добавлять видеофоны полной ширины в эти разделы.
Вы также можете добавить слайдеры видео полной ширины на свой сайт.
В этой части этого руководства мы рассмотрим, как вы можете использовать эти два основных параметра для добавления видеофона на свой веб-сайт.
Создание слайд-шоу с фоновым видео
Как часть конструктора страниц, тема Divi включает в себя два простых в использовании инструмента для ползунков:
- Обычный ползунок для создания смешанных слайд-шоу, которые могут содержать текст, изображения и видео
- Видеослайдер для создания видео слайд-шоу
Оба инструмента упрощают добавление ползунков к пользовательским макетам страниц. Однако, если вы хотите, чтобы ваше слайд-шоу содержало ссылки на другие страницы вашего веб-сайта или на внешние сайты, тогда лучше всего использовать обычный инструмент слайдера.
Это связано с тем, что, в отличие от слайдера видео, он дает вам возможность добавлять текст, кнопки и другое содержимое к вашим слайдам — даже к слайдам с видеофоном.
Создание обычного слайдера с фоновым видео
С другой стороны, если вы хотите отобразить коллекцию видео в формате слайд-шоу, лучше использовать слайдер видео.
Настройки слайдера видео
При создании нового раздела для макета страницы доступны две опции: добавить обычный раздел и добавить раздел полной ширины. Если вы решите добавить раздел полной ширины, вы получите возможность добавить к нему ползунок полной ширины.
Макет Divi Page Builder с полноразмерным слайдером
Инструмент «Слайдер Divi» упрощает добавление слайдов в ваше слайд-шоу, а после создания нового слайда вы можете добавить к нему видео. Есть несколько вариантов добавления видео на слайды, в том числе:
- Введите URL-адрес видео, размещенного на YouTube или Vimeo
- Загрузить видеофайл или выбрать существующий элемент из медиатеки WordPress
- Введите URL-адрес видеофайла, размещенного в другом месте
Добавить видео на слайд
Как упоминалось ранее, использование видео, размещенного на YouTube или Vimeo, имеет свои недостатки.
Это включает в себя возможность того, что видео станет недоступным в какой-то момент в будущем. Поэтому приятно видеть, что у вас также есть возможность быстро добавить собственное видео на слайд.
Слайдер Divi поддерживает форматы видеофайлов WebM и MP4, что дает вам две хорошие альтернативы использованию собственного видео в качестве фона раздела или слайда. Однако рекомендуется загружать видео в обоих форматах, так как это обеспечит максимальную совместимость с рядом различных устройств, таких как смартфоны, планшеты и обычные настольные компьютеры.
После загрузки видеофайла в этих форматах на ваш веб-сайт WordPress, в сеть доставки контента или куда-либо еще вы можете создать новый слайд для своего слайдера. После этого вы можете нажать кнопку «Загрузить видео», чтобы выбрать файл из библиотеки WordPress Media. Если вы размещаете видео в другом месте, вы можете просто ввести URL-адрес видеофайла.
Если вы хотите добавить на слайд любое другое содержимое с фоновым видео, например текст или изображения, вы можете сделать это на той же странице настроек.
Слайдер полной ширины с фоновым видео
Теперь в вашем слайд-шоу будет хотя бы один слайд с фоновым видео.
Добавление раздела фонового видео на страницу
Помимо создания слайдера с видеоконтентом, вы также можете установить фон раздела вашей страницы для отображения видео.
После создания новой страницы или открытия существующей для редактирования и запуска Конструктора страниц Divi можно нажать на значок Настройки раздела.
Нажмите кнопку «Настройки раздела»
При этом открывается панель настроек модуля раздела. Помимо возможности установить цвет фона и загрузить фоновое изображение для раздела, у вас также есть возможность вместо этого установить фоновое видео.
Введите URL видео
Варианты для этого снова включают загрузку или указание URL-адреса видеофайла WebM или MP4. Вы также можете установить ширину и высоту фонового видео. После того, как вы указали видео, ваш раздел теперь будет иметь фоновое видео для этой части вашего пользовательского макета страницы.
Добавить еще один модуль в макет страницы раздела
Поскольку приведенная выше информация описывает, как установить фон для раздела, вы также можете добавить в раздел больше содержимого. Затем этот дополнительный контент будет накладываться на фоновое видео. Это делается путем добавления одного или нескольких модулей в макет на основе столбцов и строк для дальнейшего построения вашей страницы и ее содержимого.
После того, как вы создали собственный макет страницы с дополнительными модулями и пользовательским содержимым, теперь у вас должна быть страница с анимированным фоном.
Раздел с фоновым видео
Инструмент для создания страниц Divi дает вам возможность добавлять несколько разделов на страницу. Это означает, что у вас есть возможность создать страницу с несколькими видеофонами, которые отображаются один за другим, с дополнительной прокруткой параллакса.
Плагины для других тем WordPress
Если вы не используете Divi или другую тему WordPress, которая позволяет легко устанавливать видеофоны для ваших страниц, то есть несколько доступных плагинов, которые могут вам помочь.
мб.YTPlayer для фоновых видео
Плагин для использования видео YouTube в качестве фона
Если вы хотите использовать видео с YouTube в качестве фона на своем веб-сайте, то бесплатный плагин mb.YTPlayer для фоновых видео может быть именно тем, что вы ищете.
Плагин дает вам возможность установить видео YouTube в качестве фонового изображения на вашей домашней странице и странице архива блога, а также на отдельных сообщениях и страницах.
Если вы хотите отображать видео YouTube в качестве фона на главной странице вашего веб-сайта, вы можете ввести URL-адрес видео на странице настроек плагина. Установка видеофона для отдельных сообщений и страниц происходит на экранах редактирования для этих элементов.
При добавлении URL-адреса YouTube вы можете ввести адрес нескольких видео, и плагин будет выбирать из списка случайным образом при каждой загрузке страницы. В настройках вы также можете установить непрозрачность видео, ввести точки, в которых видео должно начинаться и останавливаться, а также устанавливать уровень громкости.
Вы также можете настроить непрерывное воспроизведение видео, а также контролировать видимость элементов управления воспроизведением видео.
При тестировании плагин отлично справился с отображением полноэкранного видео фона, используя видео с YouTube. Единственным недостатком является то, что вы не можете установить глобальное фоновое видео, которое будет использоваться в каждом посте и на каждой странице вашего сайта. Следовательно, вам придется вручную установить фоновое видео для каждой части контента, который вы публикуете, чтобы создать единообразный вид на вашем веб-сайте.
Если вам нравится использовать видео, размещенное на YouTube, и вы не возражаете против ограничений этого бесплатного плагина, тогда mb.YTPlayer для фоновых видео поможет вам быстро настроить видеофоны для вашего веб-сайта WordPress.
Простой фон для видео WP
Easy Video Background Плагин WP
Если вы хотите настроить фон вашего веб-сайта для отображения видео откуда-то, кроме YouTube, то обновление до премиум-плагина Easy Video Background WP — это один из доступных вам вариантов.
Всего за 14 долларов открывается целый мир возможностей, когда дело доходит до добавления видеофонов к вашему контенту WordPress. Функции этого плагина позволяют вам установить фоновое видео для всего сайта или добавлять видеофоны на страницу за страницей. Вы также можете применить видеофоны к определенным контейнерам на вашем сайте, например к области сообщений.
С помощью плагина Easy Video Background WP также можно установить видео для отображения в виде фиксированного фона или дать им возможность прокручиваться вместе с остальным контентом, когда посетитель перемещается вниз по странице. Другие параметры позволяют вам устанавливать коэффициент кадрирования для ваших видео, воспроизводить их в цикле, включать автозапуск, отключать звук и устанавливать резервное изображение для мобильных устройств.
Плагин Easy Video Background WP поддерживает большое количество типов файлов, включая MP4, WebM, OCG и FLV, а также видео, размещенные на YouTube и Vimeo. Вы также получаете возможность установить наложение изображения для видео с настраиваемым уровнем непрозрачности.
К сожалению, видеофон не отображался в области боковой панели темы, с которой я тестировал этот плагин. Однако, купив этот плагин премиум-класса, вы получаете доступ к системе поддержки, чтобы сообщать о любых проблемах, с которыми вы можете столкнуться.
Заключение
Теперь вы знаете, почему, где и как добавлять видеофоны на свой веб-сайт WordPress. Поскольку скорость интернет-соединения становится все выше, а большинство веб-сайтов еще не поддерживают полноэкранное фоновое видео, самое время подумать об использовании этой функции, чтобы помочь вашему веб-сайту или блогу выделиться из толпы.
Многие из решений, которые мы только что рассмотрели для добавления видеофонов на ваш веб-сайт WordPress, полностью адаптированы для мобильных устройств и имеют возможность не отображать видео на вашем смартфоне и планшете с помощью посетителей.
Хотя видеофоны подходят не для всех веб-сайтов, для некоторых они могут быть отличным способом не только оказать сильное влияние на ваших посетителей, но и донести ваше сообщение так, как текст и изображения часто не могут.