С каждым годом наш домашний и офисный интернет становится все быстрее, что дает возможность пользователям комфортно работать с сайтами, содержащими большое количество изображений и видеоконтента на страницах. Это подталкивает вебмастеров к новым оригинальным решениям, помогающим удерживать внимание посетителя. Одной из тенденций можно назвать использование видео в качестве фона для «оживления» проектов самой разной направленности. 6701″>
Крупными и полноэкранными фоновыми изображениями в дизайне, привлекающими внимание, уже не удивишь посетителя. На смену им приходит полноэкранный видео фон для сайта. Многие дизайнеры и вебмастера подхватывают эту идею и создают невероятно интересные лендинги. В этой статье рассмотрим вопрос о том, как сделать видео фоном сайта на WordPress с помощью плагинов.
Содержание:
Источники видео и особенности выбора
Сегодня необычные примеры использования видео в фоне сайта можно увидеть как в дизайне крупных онлайн-проектов, таких как международная система расчетов WebMoney, так и на множестве одностраничных сайтов-визиток и лендинг пейдж.
Закономерный вопрос, возникающий у вебмастера, желающего оживить новый или уже имеющийся проект: где взять тематический видеоролик для сайта? Вот несколько вариантов решения:
- Подобрать бесплатное видео в одном из общедоступных онлайн-хранилищ. В интернет-пространстве достаточно много интересных вещей, предлагаемых бесплатно. Подходящие бесплатные видео для фона сайта, разрешенные для свободного использования легко можно найти на таких сайтах как Pixabay, Videvo, Pond5, Mazwai. Этот список онлайн-ресурсов с подборками коротких качественных видеороликов далеко не полон. В сети существует немало сайтов-библиотек с коллекциями изображений и видеофайлов, не столь крупных, как названные. Бесплатные видеофоны для сайта в HD-качестве и подборки футажей с текстурами, визуальными эффектами, природой, людьми и различными сюжетами только и ждут, чтобы быть использованными по назначению. Все, что необходимо сделать, это определиться с собственными предпочтениями, выбрать подходящий ресурс и скачать видео фон для сайта бесплатно.
- Создать видеоролик самостоятельно. Такой вариант может стать хорошим решением в случаях, когда есть большое количество отснятого видеоматериала у клиента, заказавшего создание коммерческого сайта. Подходит он и для ресурсов с авторским фото и видеоконтентом — например, для блога туристической тематики, автор которого решает создать красивую посадочную страницу с предложением услуг гида по какому-либо маршруту или городу. Смонтировать несложный футаж самостоятельно нетрудно и из качественного ролика с лицензией, разрешающей свободное использование видео — в этом случае возможности применения самостоятельно созданных фонов становятся гораздо шире.
- Заказать видеомонтаж. Сделать это можно как в оффлайн-студии, занимающейся изготовлением рекламных видеоматериалов, так и у фрилансеров на специализированных биржах, таких как KWORK. Несколько секунд видео для фона на лендинг или многостраничный сайт не потребуют больших финансовых затрат. Понимание того, какое именно видео требуется для решения конкретной задачи, и продуманное техническое задание помогут получить результат, близкий к желаемому. Заказ видеосюжета у профессионалов, занимающихся его созданием не один год — возможно, лучший из рассмотренных вариантов, а при создании коммерческого сайта достаточно узкой тематики (например, производственной) — единственный.
Видео на фон сайта: плагины
Совсем недавно для того, чтобы вставить видео на фон сайта, приходилось править код шаблона, вручную добавляя необходимую html и css разметку, чтобы интегрировать в сайт фоновые Jquery видеоплееры сторонних разработчиков. Сегодня с такой задачей способен справиться даже начинающий, не искушенный в веб-программировании, владелец сайта. В официальном репозитории WordPress существуют подходящие для этого инструменты-плагины. Рассмотрим некоторые из них.
Video Background
Background Video — WordPress плагин, с помощью которого легко назначить видео фон для любого элемента, как сказано в его описании. После установки и активации плагина в режиме редактирования страниц и записей сайта под редактором контента появляются дополнительные настройки. Добавив значения обязательных полей и обновив или опубликовав страницу, получаем желаемый результат.
На скриншоте выше приведены настройки, доступные в бесплатной версии плагина. В качестве фона можно использовать загружаемое на сайт видео в форматах MP4 и WebM, а также добавлять картинку, которая будет отображаться в браузерах, не поддерживающих фоновое воспроизведение видеофайлов.
Расширенные настройки, открывающиеся нажатием кнопки в левом нижнем углу, позволяют накладывать поверх видео дополнительный цветной слой с регулируемой прозрачностью. Это полезно, если текст страницы не читается на фоне видео. Здесь же включается зацикливание для видеоролика и включается/отключается аудио, присутствующее в файле.
В платной версии плагина, которую можно приобрести за 19 долларов, имеются расширенные настройки: возможность использовать видео ютуб в виде фона на сайте, выставлять для него точное время начала и завершения, а также добавлять кнопки «Пауза/Воспроизведение» для видеоплеера и «Включить/Выключить» для аудио.
mb.YTPlayer for background videos
Несмотря на сложное в написании и произношении название, плагин весьма прост и предельно понятен. Все его немногочисленные настройки находятся на одной странице, попасть на которую можно из меню консоли WordPress.
Добавив в поле ввода «The Youtube video url is» адрес видеоролика, расположенного на канале YouTube, и выбрав категории страниц, на которых будет отображаться видео в качестве фона (например, только на главной или на всех страницах), сохраняем настройки и любуемся результатом.
В бесплатной версии плагин также позволяет запоминать позицию видео, на которой был остановлен просмотр страницы, и устанавливать задержку запуска видео в 1-3 секунды. Последняя опция может пригодиться, если возникает конфликт с установленной на сайте темой или плагинами, которые мешают плееру начать воспроизведение.
Дополнительные настройки, такие как установка качества видео, соотношение сторон, степень прозрачности, цикличность воспроизведения, установка времени начала и завершения воспроизведения, наличие звука и элементов управления плеера, доступны лишь в mb.ytplayer Plus — расширенной версии плагина стоимостью 12 евро.
Плагин mb.vimeoPlayer for background videos того же автора, подобный рассмотренному и позволяющий использовать для фона видео с видеохостинга Vimeo, также можно найти в репозитории. Настройки плагина аналогичны.
Плагины независимых разработчиков
Те, кому не хватает возможностей, предоставляемых бесплатными плагинами из репозитория, могут воспользоваться услугами торговой площадки CodeCanyon, предлагающей плагины WordPress от независимых разработчиков для загрузки видео в фон сайта, обладающие большим количеством опций. Здесь же можно найти и аддоны для Visual Composer. Вот несколько наиболее известных премиум-плагинов:
- Easy Video Background (HTML5)
- Easy Video Player WordPress Plugin
- Simple BG — Easy Video Background
- Full Width Background Gallery with Youtube Video
- Video Player & FullScreen Video Background
- Parallax & Video Backgrounds for Visual Composer
Нюансы использования видео в качестве фона
Прежде чем использовать видео-background для сайта, имеет смысл ознакомиться с некоторыми нюансами, знание которых поможет избежать основных ошибок и сделать сайт лучше.
- Следует подумать, насколько уместен видеофон для сайта, на котором предполагается его разместить. Грань между оригинальностью решения и его бесполезностью в каждом конкретном случае приходится проводить индивидуально. Не нужно забывать о том, что никакие изыски дизайна не должны отвлекать посетителя от цели посещения сайта. Напротив, все его элементы, в том числе, и видео на заднем фоне сайта, должны способствовать улучшению взаимодействия посетителя и интернет-ресурса.
- Автовоспроизведение звука в фоновом видеоролике — не лучший из возможных вариантов. Подобный подход зачастую способен отпугнуть посетителя и заставить его поскорее закрыть «шумный» сайт. Хорошим тоном считается использование беззвучных фоновых видеозаставок либо предоставление пользователю возможности включать звук самостоятельно.
- Установленный на странице видеофон должен гармонично сочетаться с ее текстовым содержимым. Если текст страницы сливается с фоном (плохо читается) в какой-то из моментов проигрывания ролика, о его «правильном» воздействии на читателя не может быть и речи.
- Видео, используемое на странице, не должно сильно замедлять ее загрузку. Видеоконтент, в сравнении с прочими, составляющими сайт элементами, обладает наибольшим весом. Поэтому, чтобы не потерять часть аудитории, в качестве фона желательно подбирать ролики, не слишком продолжительные по времени.
- Готовое решение всегда необходимо проверять на предмет кроссбраузерности, корректного и плавного воспроизведения видео в фоне сайта на всех типах устройств. В случае невозможности воспроизведения видео посетителю должен предоставляться альтернативный вариант фона – например, в виде статического изображения.
Заключение
Как видим, задача, кажущаяся на первый взгляд нетривиальной, вполне по силам даже новичку, начинающему осваивать WordPress. А уж в руках человека креативного и любящего эксперименты, короткие видеоролики могут стать хорошим подспорьем в работе над сайтом, собственным или клиентским. Грамотное и уместное использование современных трендов в веб-дизайне зачастую способно сделать ресурс привлекательнее для пользователей и улучшить его поведенческие факторы. Сказанное относится и к видео в фоне сайте.
