Видео фон для сайта: плагины для WordPress
Привет, уважаемые читатели!
С каждым годом наш домашний и офисный интернет становится все быстрее, что дает возможность пользователям комфортно работать с сайтами, содержащими большое количество изображений и видеоконтента на страницах. Это подталкивает вебмастеров к новым оригинальным решениям, помогающим удерживать внимание посетителя. Одной из тенденций можно назвать использование видео в качестве фона для «оживления» проектов самой разной направленности.
Крупными и полноэкранными фоновыми изображениями в дизайне, привлекающими внимание, уже не удивишь посетителя. На смену им приходит полноэкранный видео фон для сайта. Многие дизайнеры и вебмастера подхватывают эту идею и создают невероятно интересные лендинги. В этой статье рассмотрим вопрос о том, как сделать видео фоном сайта на WordPress с помощью плагинов.
Содержание:
- Видео для сайта: бесплатно и за деньги
- Плагины 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. А уж в руках человека креативного и любящего эксперименты, короткие видеоролики могут стать хорошим подспорьем в работе над сайтом, собственным или клиентским. Грамотное и уместное использование современных трендов в веб-дизайне зачастую способно сделать ресурс привлекательнее для пользователей и улучшить его поведенческие факторы. Сказанное относится и к видео в фоне сайте.
видео на фон сайта gamestores | ServerRust
denimshow
Новичек
- #1
Поможете мне я в ютубе посмотрел ну она бывает маленьким не понимаю что делать последний надежда это вы
Disuma
Новичек
- #2
Могу взяться за работу.
HUZAKI
Посасываю члены
- #3
Disuma написал(а):
Могу взяться за работу.
Нажмите для раскрытия…
Как бы тут и делать нечего)
Disuma
Новичек
- #4
HUZAKI написал(а):
Как бы тут и делать нечего)
Нажмите для раскрытия. ..
igor2288
Новичек
- #5
denimshow написал(а):
Поможете мне я в ютубе посмотрел ну она бывает маленьким не понимаю что делать последний надежда это вы
Нажмите для раскрытия…
внешний вид/виджеты/добавить/пользовательский полностью стираешь стандартно предложенный и вставляешь этот.
Код:
<video loop="true" muted="true" autoplay="true" playsinline="true"><source src="https://ТУТССЫЛКАНАВИДОС" type="video/mp4"></video>
не забудь ссылку на видос.
фантастических примеров полноэкранного видеофона в веб-дизайне
Если вы думаете о включении видеофона в свой веб-дизайн, то вы в хорошей компании. Все больше и больше дизайнеров используют этот динамический визуальный элемент, чтобы добавить глубины и объема своим веб-сайтам. И когда все сделано хорошо, веб-сайты с видеофоном могут выделиться среди конкурентов.
Использование фоновых видео дает множество преимуществ. Видео может добавить уровень глубины и реализма, с которым просто не могут сравниться статические изображения. Их также можно использовать для создания динамичного и привлекательного взаимодействия с пользователем. При правильном использовании видеофоны действительно могут вывести ваш сайт на новый уровень.
Связано: Фоновые изображения веб-сайтов — веб-сайты с большими фоновыми фотографиями
Веб-сайты с фоновым видео
Конечно, добавление видеофоновых изображений не обходится без проблем. Они часто могут увеличивать время загрузки страницы и не всегда совместимы с мобильными устройствами. Но если вы готовы принять эти вызовы, награда может быть велика.
Чтобы помочь вам начать работу, мы составили список из 25 выдающихся примеров видеофонов в веб-дизайне. Эти сайты относятся к разным отраслям, и все они по-разному используют видеофоны. Ищете ли вы что-то гладкое и минимальное или что-то более игривое и веселое, вы обязательно найдете здесь вдохновение.
Чего же ты ждешь? Начните изучать эти успешные сайты!
Университет Св. Иоанна
Университет Св. Иоанна — католическое учреждение, расположенное в Нью-Йорке. Циклическое видео, показанное на их домашней странице, содержит видеозаписи студенческой жизни как в классе, так и за его пределами. В этом случае видео используется не только в качестве элемента дизайна веб-сайта, но и для того, чтобы дать потенциальным учащимся представление о школьном опыте. (См. другие школьные веб-сайты для вдохновения. )
Pollen London
Pollen London — агентство цифрового брендинга. Их домашняя страница почти полностью состоит из полноэкранных видео и не более того. Бесконечная петля ведет зрителя через различные дизайнерские проекты агентства, от полиграфического дизайна до брендинга и веб-сайтов для клиентов в сфере моды, розничной торговли и музыкальной индустрии.
Cage
Cage — это инструмент для совместной работы дизайнеров и агентств. На веб-сайте используется полноэкранный цикл фонового видео, но гораздо тоньше, чем в предыдущих примерах. Здесь вы получаете представление о людях и продукте в действии, но текст на веб-сайте здесь является более важным элементом.
Playa Grande Golf & Ocean Club
Playa Grande Golf & Ocean Club, расположенный на северо-восточном побережье Доминиканской Республики, использует великолепное высококачественное видео, чтобы продемонстрировать идиллическое расположение и впечатляющие удобства и мероприятия клуба. В этом случае фоновое видео является важной частью брендинга этого сайта.
Adrenalin
Adrenalin — еще одно агентство креативного дизайна. Мы любим смотреть на дизайн веб-сайта агентства, чтобы увидеть, что в нем актуально и актуально. На этом сайте используются зацикленные видеоролики, демонстрирующие проекты, которые они завершили для клиентов. Когда нет видео, в качестве альтернативы видеофонам вставят большое изображение и увеличат, чтобы сделать его анимированным.
Lifted Logic
Lifted Logic, компания веб-дизайна из Канзас-Сити, использует на своем сайте автоматически воспроизводимые видеофоны в сочетании с простым накладываемым текстом. Видео представляет собой петлю команды, усердно работающей, делая то, что они делают. Это дает посетителям сайта ощущение, что они узнают, с кем они будут работать. Это простой, эффективный и без излишеств дизайн.
The Ramp
На веб-сайте Ramp School of Ministry используется фоновое видео, в то время как большинство сайтов используют изображение заголовка, и они делают это довольно успешно. Они выбрали сильные, красочные, эмоциональные образы, демонстрирующие их миссию и разнообразные способы ее выполнения. (См. другие некоммерческие веб-сайты для вдохновения.)
Rino & Pelle
Когда вы посещаете веб-сайт Rino & Pelle, вы сразу же видите потрясающее полноэкранное видео с высоким разрешением, демонстрирующее новейшую коллекцию дизайнера. На этом сайте элемент видео является основным событием, а ссылки для навигации и покупок отходят на второй план. Это хороший выбор дизайна для сайтов одежды, которые часто выпускают новые коллекции. (См. другие модные веб-сайты для вдохновения.)
Union Room
Union Room — цифровое агентство, которое создает веб-сайты, UX и стратегии цифрового маркетинга. Видеофон на их домашней странице является вторым этапом после текста, который объясняет, что они делают. В этом случае привлекательный фон видео используется как особенность дизайна, которая создает настроение.
Orca
Orca продает широкий ассортимент гидрокостюмов. На сайте представлены полноэкранные соответствующие изображения для каждого стиля, причем некоторые из них используют видео с автоматическим воспроизведением. Посмотрите на прокручивающиеся категории достаточно долго, и вы увидите супер-крутое видео о том, как кто-то занимается фридайвингом.
Native Land
Застройщик и соинвестор Native Land создает в Лондоне высококачественные здания многофункционального и коворкингового пространства. Они решили использовать художественный зацикленный видеофон, который задает атмосферу того, что они строят. Он сочетает в себе абстрактные видеофрагменты с видео людей, задействованных для создания визуального опыта.
Gypsum Hills Ranch
На этом веб-сайте местной животноводческой фермы используется великолепное высококачественное видео, в то время как вы обычно ожидаете увидеть только изображение в заголовке. В этом случае он чрезвычайно успешно привлекает ваше внимание. Цикл видео является частью более подробного видео о ферме, которое доступно для просмотра по ссылке прямо перед началом.
Привет, Кожа
Размер видео имеет значение! По крайней мере, в данном случае это так. Привет, на веб-сайте Skin представлены потрясающие полноразмерные видеоролики об использовании их продуктов. И с текстом и логотипами как можно ближе к краю, большие видео размером с браузер являются главным событием.
Future Goals
Future Goals — это карибская программа, в рамках которой пластиковые отходы и рыболовные сети используются в океане для создания красочных футбольных ворот для детей. Видеофон на главной странице демонстрирует путешествие мусора из океана, которое в конечном итоге превращается в веселую игру в футбол с детьми. Несмотря на то, что это фоновое видео, оно отлично подходит для создания сцены для миссии группы.
Zebra Idea Lab
Zebra Idea Lab — еще одно креативное агентство, которое использует видеоконтент, чтобы показать, что они могут сделать и что они сделали. Циклический заголовок видео на главной странице представляет собой простое стоковое видео для поддержки копии заголовка, но они также содержат уникальный коллаж из видеоклипов их прошлой работы, когда вы прокручиваете страницу дальше вниз.
Денверская семинария
Фоновое видео Денверской семинарии уникально тем, что для его просмотра нужно нажать кнопку воспроизведения — это редкое видео, для которого не настроено автовоспроизведение. Посетители с медленной загрузкой интернета оценят возможность включать и выключать видео, но другие могут вообще не заметить, что видео существует.
INOVATIV
INOVATIV разрабатывает и продает мобильные рабочие станции для всего: от научного оборудования до голливудских студийных камер. Фоновое видео на их домашней странице показывает разнообразие их продуктов в полевых условиях и в использовании, что эффективно добавляет уровень волнения в интернет-магазине для катящихся тележек, которых в противном случае не было бы.
Sound/Stage
Sound/Stage – это серия бесплатных концертов, организованная подразделением цифровых медиа Филармонической ассоциации Лос-Анджелеса. Сайт посвящен переносу музыки на цифровой экран, созданной в ответ на пандемию COVID-19. Полноэкранный фон видео представляет собой коллаж из клипов из сериала. Он показывает высококачественные, насыщенные видео различных артистов, выступающих на сцене в условиях социальной дистанции.
Holland Green
Holland Green — это студия архитекторов, дизайнеров интерьеров и ландшафтных дизайнеров. Полноцветный полноэкранный видеофон на их веб-сайте повторяет множество характерных, красивых домов и пейзажей, которые они разработали. Если у вас нет бюджета на видео, в этой нише можно добиться аналогичного результата с анимацией масштабирования на фотографиях.
Storyland Studios
Storyland Studios — дизайнерская и производственная фирма, которая занимается созданием иммерсивных игр. Если есть какая-то путаница в отношении того, что это значит, фоновое видео на их веб-сайте полностью прояснит ситуацию! Он демонстрирует широкий спектр забавных и интересных проектов, которые компания завершила. Это видео действительно эффективно создает впечатление, что эта студия может справиться с любым вашим проектом.
Bertani
Веб-сайт вин Bertani использует великолепные высококачественные видеоролики о процессе виноделия, рядах лоз, голых руках, винограде и погребах — все, чтобы поддержать свое послание о гордых традициях и истории. , идентичность и подлинность. Этот веб-сайт разработан с высоким стилем и весьма эффективно создает настроение. Без фонового видео это было бы не так эффективно.
Photobooth Supply Co.
Photobooth Supply Co. предоставляет фотобудки как развлекательную возможность для бизнеса «под ключ» для предпринимателей. Видео, воспроизводимое в полноэкранном режиме на главной странице веб-сайта, служит демонстрацией фотобудки, демонстрируя как ее работу, так и количество довольных пользователей. Это фоновое видео отлично справляется с первоначальным вопросом «что это?» вне уравнения.
Lucid Motors
Lucid Motors — производитель роскошных электромобилей. Когда вы посещаете веб-сайт, вас встречает полноцветное полноэкранное видео с новейшим транспортным средством Lucid Air, которое делает то, для чего оно предназначено — управляется. Остальной дизайн сайта уходит за кулисы видео. Если вам нравится то, что вы видите, прокрутите вниз, чтобы узнать больше об автомобиле, и зарезервируйте его для себя.
10up
У веб-разработчиков 10up есть фоновое видео, в котором кадры людей, использующих веб-сайты, сочетаются с кадрами работающих людей, а также несколько снимков веб-сайтов, над которыми они работали. Одной из полезных функций здесь является то, что они добавили возможность приостанавливать и возобновлять воспроизведение видео в фоновом режиме.
Lodisna
Транспортно-логистическая компания Lodisna сумела сделать художественные, красивые и привлекательные фоновые видеоматериалы для грузоперевозок. Низкая контрастность, слегка размытая и абстрактная атмосфера в сочетании с красными геометрическими акцентами — действительно приятное прикосновение.
Найдите недорогие стоковые видеоролики для ваших дизайнов
Если вы хотите использовать видеофон для своего собственного веб-сайта или в дизайне веб-сайта клиента, вам, конечно же, понадобятся качественные видеоматериалы. Хотя вы можете использовать пользовательское видео, если оно у вас есть, стоковые кадры — это более простое, быстрое и дешевое решение. Мы рекомендуем Envato Elements, где вы можете скачать неограниченное количество профессиональных стоковых видео с лицензиями на коммерческое использование.
Заключительные мысли о веб-сайтах с фоновым видео
Если вы пришли сюда в поисках вдохновения, обязательно просмотрите все сайты с фоновыми видео в этом списке. Все они используют видео по-разному и творчески, и они обязательно оставят вас с некоторыми собственными идеями. Нам не терпится увидеть, какие удивительные вещи вы создадите, используя видеофоны!
Фоновое видео для вашей домашней страницы
Ваш веб-сайт предназначен для того, чтобы рассказать вашу историю, и фоновое видео может стать большим подспорьем в создании тона и настроения. Они особенно популярны на определенных типах веб-сайтов, особенно на профессиональных, роскошных или «визуальных продуктах».
Помимо того, что они привлекают внимание, при эффективном использовании видеофоны могут стимулировать посетителей дольше оставаться на веб-сайте и повышать коэффициент конверсии. В этой статье мы обсудим несколько примеров эффективных фоновых видео и как разместить их на своем веб-сайте.
Примеры фонового видео
Чтобы быть эффективными, видеофоны веб-сайта должны привлекать посетителей, не отвлекая от содержимого вашего сайта. В идеале визуальные эффекты помогут установить настроение или тон, но вы не должны полагаться на фоновое видео, чтобы информировать или объяснять.
Несмотря на то, что вы должны размещать на своем веб-сайте информативные видеоролики, такие как пояснения и рекламные видеоролики, ваша предыстория не подходит для подробного объяснения вашего продукта. Они более эффективны, если встроены в страницу, где посетители, которые хотят узнать больше, могут щелкнуть и просмотреть их.
Вот несколько примеров веб-сайтов, которые эффективно используют фоновое видео на главной странице, и почему они работают.
ProjectSkin
Благодаря мягкому освещению, успокаивающим естественным цветам и текстурам, а также кадрам роскошной спа-атмосферы, фоновое видео на этом веб-сайте прекрасно создает определенное настроение с того момента, как вы попадаете на страницу.
ThemePunch
На этом веб-сайте используется короткое цикличное черно-белое замедленное видео команды за работой. Высококонтрастный текст и желтые кнопки привлекают внимание и создают профессиональный образ.
Магазин для серфинга HTO
Заходя на этот сайт, вы сразу же погружаетесь в бурлящие волны благодаря видеофону. Эти кадры от первого лица обладают огромной энергетикой, которая заставляет вас не только хотеть отправиться в океан и нырять в него (идеально подходит для магазина серфинга), но и предполагать, что эти люди живут серфовым образом жизни и поэтому знают, о чем говорят.
Фонд Обакки
Видеофоны также хорошо подходят для вызова эмоциональных реакций, что делает их идеальными для некоммерческих организаций. Здесь некоммерческая организация, занимающаяся обеспечением водой нуждающихся, использует изображения текущей воды и снимки людей, которым они помогают, чтобы создать ощущение непосредственности своего дела.
Фоновое видео Что нужно и чего нельзя делать
Хотя они не идеальны для подробного объяснения сложного инструмента, если у вас есть наглядный продукт, видеофон может быть как раз для вашего веб-сайта. Мы кратко обсудили, почему вышеперечисленные веб-сайты работают — вот еще несколько советов по использованию видеофона на любом веб-сайте.
Не выбирайте любое видео. То, что он хорошо выглядит, не означает, что он подходит для вашего бизнеса. Убедитесь, что изображения актуальны. Однако это не означает, что вы должны показывать только свой продукт, но подумайте об идеальном результате, который может дать ваш продукт или услуга. Например, если вы сантехник, не показывайте кадры с трубами, не показывайте кого-то, кто принимает душ, или детей, радостно играющих под садовым дождевателем в солнечный день.
Ограничьте продолжительность видео. Большинство приведенных выше видео довольно короткие и плавно зацикливаются, чтобы создать впечатление более длинного видео. Видеофайлы могут быть довольно большими; короткое зацикливающееся видео помогает предотвратить замедление загрузки сайта из-за размера фонового видео.
Не отвлекайтесь от важного. Ваш видеофон должен дополнять контент вашего веб-сайта, а не отвлекать его. Вы по-прежнему хотите, чтобы ваша аудитория читала вашу копию, перемещалась по вашему сайту и нажимала на ваши призывы к действию.
Убедитесь, что ваш контент виден. Убедитесь, что у вас есть сильный контраст между вашим видео и содержимым поверх него. Вы можете использовать наложение, чтобы добавить цвет или осветлить/затемнить видео, чтобы обеспечить удобочитаемость, или вы можете сделать свой контент контрастным цветом (или и то, и другое, как ThemePunch сделал в приведенном выше примере). В общем, придерживайтесь приглушенных цветов в своем видео. которые дополняют остальную цветовую палитру на вашем сайте.
Не используйте фоновое видео со звуком. Не надо. Автовоспроизведение видео со звуком — отличный способ заставить пользователей немедленно закрыть окно. Если в вашем видео есть звук, убедитесь, что он отключен по умолчанию.
Учитывайте удобство использования. Просмотрите аналитику своего веб-сайта — какие браузеры и устройства используют большинство ваших посетителей? Видеофон вашего веб-сайта бесполезен для вас, если большинство ваших пользователей его не видят, поэтому обязательно используйте типы файлов, которые широко поддерживаются. Ознакомьтесь с этой статьей, чтобы получить конкретные советы по удобству использования.
Не изобретайте велосипед. Добавление видеофона может быть таким же простым, как загрузка видео и нажатие кнопки, или сложным, как написание партий кода, в зависимости от вашего веб-сайта. Если вы не разработчик, избавьте себя от головной боли и используйте плагин, тему или конструктор веб-сайтов, поддерживающий фоновое видео.
- Сделайте все гладко. Вы хотите, чтобы ваше видео выглядело как бесшовный фон, а не как встроенное видео. Скройте элементы управления видео и все остальное, что может отвлекать пользователя.
Как использовать фоновое видео
Это может быть немного сложно для нетехнических людей, но ваш веб-разработчик должен знать, как это настроить довольно быстро.
Обычно фоновые видео настраиваются с использованием HTML5. Это вопрос создания вашей страницы в HTML, стилизации ее с помощью базового CSS и добавления некоторого кода для наложения контента, в то время как видео остается фиксированным и центрированным на заднем плане. Вам также потребуется добавить некоторый код для управления видео, включая автовоспроизведение, отключение звука и цикл.
Чтобы получить более подробные инструкции по настройке видеофона с помощью HTML5, ознакомьтесь с этой статьей. Обратите внимание, что конструкторы веб-сайтов, такие как Wix, Squarespace, Shopify и альтернативы Shopify, также упрощают добавление видеофонов. А если вы используете WordPress, есть плагины и темы, которые также упрощают этот процесс.
Сделать фоновое видео
С помощью Biteable вы получаете доступ к более чем 850 000 стоковых видеороликов. Многие из них идеально подходят для фоновых видеороликов веб-сайта, особенно если вы придерживаетесь только базовых видеоматериалов или анимации.
Ознакомьтесь с библиотекой видеоматериалов Biteable.
К другим хорошим источникам бесплатных видеоматериалов относятся такие сайты, как Pexels, Coverr, специализирующийся на видеороликах для домашних страниц, и Videvo, предлагающий более 3000 бесплатных видеоматериалов в формате HD.
Подведение итогов…
Если все сделано правильно, видеофон может привлечь пользователей и модернизировать ваш веб-сайт, но подумайте, подходит ли эта тенденция веб-дизайна для вашего сайта.
Если вы готовы создать свою собственную, убедитесь, что вы следуете нашим рекомендациям и запретам, чтобы ваш видеофон помогал вам эффективно рассказывать свою историю, не отвлекая от нее.