Как правильно использовать фоновое видео: 24 сайта в пример
Статья детально описывает все аспекты использования фонового видео на сайте. Какой тип видео и когда эффективнее работает, как найти подходящий видеоконтент для своего сайта и где какой применить? Как скорректировать видеобэкграунд на веб-странице и эффектно представить важные для Вас ключевые моменты фоновым видео. Рассмотрены лучшие практики и правила, дающие шанс избежать ошибок.
Вот сейчас, куда вы смотрите?
Машинально сфокусировали внимание на видео, правильно? Движущуюся картинку почти невозможно игнорировать. Но с вами все в порядке – на что обращать внимание, решено на подсознательном уровне. Мы легко отвлекаемся на движущиеся объекты, подобно собаке преследующей добычу.
Ну допустим, притягивает взгляд это нелепое видео с продуктами. А как видео-фон связать с дизайном, спросите вы?
При правильном видеомаркетинге, привлекательный бэкграунд вписывается в оформление страницы. Маркетологи ценят видео за креатив, красоту и ту артистичность, которую статика изображений не в состоянии передать.
Эксперты по конверсии и сайто-владельцы отмечают факт: видеоинформация повышает интерес к офферу и лояльность потребителей (больше регистраций, подписок на услуги / сервисы). Из исследования FoodBloggerPro:
С использованием видео в качестве фона на главной странице, целевая посадочная конверсия возросла на 138%
Надо признать, увеличение конверта на 138% – исключительно удачный тест, проводимый мастерами оптимизации. На улучшения в 10% – 20%, вполне можно рассчитывать без помощи профессионалов. Это не гипотетический сценарий влияния на продажи. В видеомаркетинге работают правильные подходы (как и во всем маркетинге). Даже новации способны навредить дизайну и сайту в целом. Далее рассмотрены выигрыши / трудности / особенности видео-решений в бэкграунде.
Как использовать видео для фона сайта – правильные подходы
Часть 1: Когда применять видео-фон на сайте?
Видео в фоне наиболее эффективно, если:
- Есть необходимость сформировать связанную с вашей предметной областью атмосферу
- Вы хотите задать тон, нацеливаясь на диалог с аудиторией
- Ваша тематика предполагает положительную эмоциональную реакцию
Пример #1: Бизнес, Сервисы, Учреждения
Видео в фоне подойдет большинству профессиональных сайтов: сферы бизнеса, консалтинга или дизайн агентствам. Тематичный клип, показ рабочей жизни команды / процесса создания / полезности потребителю – дадут шанс ознакомиться с деятельностью, продуктом или услугой. Клиент, визуально представляя что его ожидает, будет подготовлен к общению с вами.
Поставщик медицинских услуг на главной размещает промо-видео, поясняющее доменный нейминг (Premise Health – предпосылка к укреплению здоровья).
на сайт
В первом экране посетителю показывают занятия йогой / спортом и разговоры с доктором. Так, промо-сайт повышает доверие к оздоровительной программе холдинга
Видео максимально воздействует на целевую аудиторию. Это смелое решение – выше линии сгиба не каждый сможет, оправдано заменить тексты видеоконтентом:
на сайт
Посетителю показывают процесс разработки дизайнов для клиентов: взаимодействие команды, совещания по выработке стратегии…
De Republica – австралийская digital студия с видео-продакшн услугами:
на сайт
Похоже, привлекать и позитивно настраивать клиентов, главная задача видеосайта студии. Видеобэкграунды основной элемент в этом стильном черно-белом дизайне. Эффектно затемненное фоновое видео в футере, синхронизировано с видеохедером
Пример #2: Реальные, либо цифровые продукты
Видеобэкграунд также подойдет, если вы реализуете продукцию. Видя как другие пользуются продуктом, человек приобретает визуальный опыт. Демонстрация стиля жизни побуждает обладать подобным – это классика видеомаркетинга. Такая картина способна убедить клиента, не прочитавшего еще ни строчки на вашем сайте!
Сайт продает музыкальное приложение для фитнеса:
на сайт
Видеобэкграунд отлично презентует софт Fit Radio – наглядно показано как полезное сочетается с приятным (пример с физической продукцией dontabak.ru)
В полноэкранном формате имеет смысл демонстрировать достоинства решений для сферы спорта, туризма (curadmir.com, alabama.travel).
Пример #3: Позитивный опыт (мероприятия, туры, гостеприимство)
Фоновое видео способно передать: приключенческий дух / ощущение приятного оживления / общего порыва. Почему бы не использовать видео организаторам праздников, приемов, в тур. / гостиничном бизнесе с B&B (размещение + кейтеринг) и сферах деятельности, где присутствует пункт назначения.
Сайт продвигает тур-бизнес на калифорнийском побережье:
на сайт
Интро задает сюжетную линию – низкий полет над красивыми пейзажами с эпизодами отдыха / единения с природой. Напоминает «Алису в стране чудес». Выберите тип отдыха и заряжайтесь видео-позитивом далее…
Пример #4: Разнообразные заведения (рестораны, гостиницы, музеи, магазины)
Vandal это ресторан в Нью-Йорке:
на сайт
Шикарный интерьер в видеобэкграунде соблазняет посетить заведение
Хотя это лишь видеобэкграунд шаблона от Wix, само видео сделано очень качественно:
на сайт
Шеф повар оформляет блюда, раскладывая кусочки еды по тарелкам. Наблюдая за процессом, хочется их проглотить (особенно когда не обедал)! Это видео очень эффективно работает
Пример #5: Видео-сторителлинг (покажите краткую историю, заставляющую улыбнуться)
Задача сторителлинга в видео: заинтересовать историей с «живыми» героями, вызвав симпатию у целевой аудитории. Зажигательная история с эпатажным героем нашего времени, вот что берет за душу и запоминается. «Расскажите» веселую / трогательную / не лишенную обаяния историю (прием, применяют крупные бренды).
Креативно-рекламное агентство специализируется на создании визуального контента:
на сайт
Видеосторителлинг в интро на главной: «удачно проведенный день» с запоминающимся персонажем
Это лишь малая часть потенциала видео в качестве фона сайта. Еще применение:
- СПА салоны – можно создать атмосферу роскоши, безмятежности и релаксации сняв клип с лицами счастливых клиентов в эпизодах
- Отели / B&B / сдача внаем на каникулы и отпуска – покажите апартаменты для отдыха со всеми удобствами, близлежащие сервис-услуги, делая акцент на воодушевлении и страсти к приключениям
- Бизнес / Продукция – можно усилить бренд, выразив в видео-фоне сущность продукта. Реализуя спорт-товары, показать процесс занятий с ними – это вдохновит желающих так проводить время / получить подобные результаты. Продолжите список сами…
- Landing page (лэндинг пейдж) – фоновое видео будет способствовать получению мотивированного трафика на страницу захвата
Важно: не выбирайте видео-бэкграунд, лишь по критериям красоты видеофрагментов. Он должен быть релевантным сайту и бизнесу в целом. Конечно, приятное видео сделает сайт для кого-то интереснее. Правильно же подобранное (для вашей сферы / бизнес-продукта) – станет мощным маркетинговым и брендинг инструментом. Теперь можно посмотреть на свой сайт, представив как воплотить фоновое видео, чтобы вывести дизайн и брендинг на новый уровень.
Часть 2: Когда НЕ следует использовать видео-бэкграунд на своем сайте?
Даже интересная видео-презентация, где все по делу, может оказаться ошибочным решением. Когда требуется сфокусировать внимание на очень специфичном, слишком «агрессивное» видео в фоне будет перетягивать на себя внимание. Вот почему лучше не использовать фоновое видео на сайте с комплексом услуг или продуктов, нуждающихся в пояснении для их восприятия аудиторией. Как и любой инструмент маркетинга, видео-бэкграунд должен служить лучшему опыту пользователя (UX). А UX-дизайн предполагает последовательное, согласованное и не терпит противоречий.
Проведите UX-анализ сайта и своего бизнеса и не преследуйте цель, не улучшающую опыт пользователей.
Часть 3: Пять золотых правил для фоновых видео
Различный видеоматериал работает хорошо на разных сайтах, когда он применяется правильно. Это скорее советы, чем окончательные рекомендации по всем аспектам видео-маркетинга. Их стоит придерживаться, чтобы избежать часто совершаемых ошибок.
Правило #1: Используйте видео фоны с определенной целью
Нацеленное на достижение результата видео-решение, должно укрепить бренд или идею сайта. Например, бухгалтеру не стоит демонстрировать пейзажи швейцарских Альп. При всей красоте, они не имеют отношения ни к нему, ни к финансовой отрасли. Неуместная картина сбивает с толку – что тут предлагают: «Походное снаряжение?», а может «Спец. программу отпуска в Швейцарии?».
Эффективный видео-бэкграунд тот, что дополняет миссию главной страницы и сайта
Отечественный пример продающего фонового видео – главная страница сайта ресторана:
на сайт
Видеопоток насыщенной событиями жизни людей. Сюжетная линия: велопрогулка девушки по городу. Мелькают сцены, вызывающие гастрономические ассоциации
Развлекательная компания оформила главную в стиле материального дизайна с несколькими видео в фоне:
на сайт
Подмигивающий логотип, сменяющиеся по секциям видеобэкграунды тонированные разными цветами и полупрозрачный контентный блок с забавными рисунками / CTA-элементами
Правило #2: Возможности видеоискусства велики, но не позволяйте фону затмить все
Фоновая видеопрезентация бизнеса не должна ухудшить заметность контента поверх, что будет признаком плохого UI/UX. Позаботьтесь о необходимом контрасте, читабельности призывов и различимости навигационных элементов.
Как достичь нужного эффекта?
Вариант первый: подобрать контрастный цвет для контента
Убедитесь в достаточной контрастности текста / кнопок / иконок. Белый логотип и типографика заметней на темном видео, при светлом бэкграунде контрастный цвет не позволит контенту сливаться с фоном.
Контурные элементы дают отличный контраст (пример buddhatobuddha.com).
Вариант второй: осветлить или затемнить видеоматериал
Тексты поверх энергичного видео со множеством деталей затруднительно читать (даже при хорошем контрасте). Так и хочется уменьшить цветовую насыщенность. Немного смягчить картинку поможет осветление / затемнение видео-фона оригинала.

Пример затемнения — union.co

Пример осветления — cobblehilldigital.com
Вариант третий: цветокоррекция с тонированием в контрастные цвета
Видеообработка с наложением оттенков дает аналогичный эффект. Дополнительные бонусы: можно подогнать секцию под дизайн, задать стиль используя цвета бренда, расширить палитру, вызвать ассоциации, проявить индивидуальность…
на сайт
Вариант четвертый: наложение текстуры на оригинальное видео и др. эффекты
Наложение эффектов практикуется в видеорекламе. Можно применить их для оформления фонового видео на сайте. Инструменты видеомонтажа и обработки видео тут.
Сайт российской студии производства фильмов:
на сайт
Для фоновых изображений и видео применяется наложение сетчатой текстуры. Похожий пример: drygital.com
Правило #3: Создайте короткий закольцованный ролик (бесконечное видео)
Главная забота использующего видео-форматы — скорость открытия веб-страницы. Но посетитель и не ожидает увидеть «кинокартину». Видео для фона сайта правильнее будет сделать привлекательным сниппетом, «выдержкой» из вашего видеоматериала. Вывод один: чтобы не понизили в ранжировании, уменьшать вес видеофайла. Зациклите видео, создав иллюзию непрерывного показа своего тематичного клипа.
В идеале, длительность фонового ролика 5-10 сек., при размере в 6MB и менее… как у Bukwild:
на сайт
Быстрая загрузка страниц сайта с видео-фонами разной длительности (до 20-30 сек.)
Вариант с черно-белым видеобэкграундом:
на сайт
Градации серого цвета уменьшили вес видеофайла для фона главной страницы
Видеомонтажные сервисы и программы-видеоредакторы помогут с творческой обработкой вашего материала
Создать микс, закольцевать видеоролик можно по разумным ценам и бесплатно: fiverr.com, coub.com, movavi.ru.
Правило #4: Уберите звук
Автозапуск видео со звуком при загрузке относят к особо раздражающим факторам. Удалите звук из видеозаписи на Fiverr.com. Или приглушите. Хуже всего звучание взрывного характера, как у брендингового агентства gooqx.com (включение музыки с задержкой, прокрутка плавно отключает звучание – выглядит как поощрение просмотра портфолио). Обычно озвучка вообще неуместна, если только это не специфичный проект как bushrenz.com (тут спасает опция – выключить).
на сайт
Полная версия видеоролика озвучена, но запускается по желанию пользователя
Правило #5: Воспроизводите видео фоном (без управления)
Элементы управления не нужны (видео-фон не Media Player). Но порой их прикручивают к хедеру или бэкграунду. Видео-инструкции / обучающие видео, вообще не уместны в фоне. Известно что, видеопрезентации услуг с исчерпывающей информацией / ролики с подробным описанием продукта обладают вирусным потенциалом при более глубокой эмоциональной связи с аудиторией.
Вопрос решается парой кнопок, переключающих на другой видеоформат:
на сайт
В создании клипа использовалась ускоренная / замедленная съемка
Еще пример с крутыми видеороликами на страницах видео-сайта:
на сайт
Медиаконтент доминирует на всех страницах. Контрастная контурная кнопка на главной с эффектной Hover заливкой (запускает ролик с управлением и звуком)
Где брать видео фоны для сайта
Сначала у вас проблема: где взять видеоматериал для сайта? См. правило #1, чтобы выбранное видео, информировало (кратко о ваших ценностях) / побуждало воспользоваться уникальным предложением / укрепляло бренд.
Лучше всего индивидуальные решения. В наше время даже iPhone позволяет справиться с задачей. Помните, что видео не обязательно должно быть идеальным? Особенно, созданное под затемнение / осветление или тонирование цветом. Еще варианты:
- Заказать у фрилансеров
- Стоковые видеоролики различной тематики (платные и бесплатные). Они вполне подходят для создания на сайте специфичной атмосферы
Часто платное и бесплатное стоковое видео различается лишь по техническому качеству и возможностям выбора (полезны оба источника):
- VideoHive: доступные цены: от $5 до $35. Хорошие шансы найти то, что нужно
- Free Video Sources: Ресурсы с бесплатными видео: 25 сайтов-источников видеоконтента для сайта бесплатно. Отличный вариант для старта
Несколько красивых примеров видео на фоне
Сайт студии производства видеоматериалов эффектным клипом захватывает внимание посетителей:
на сайт
В стиле моушн: пример креативной видеосъемки и наложения эффектов
Разработчик медиа-контента Tongal производит рекламные ролики и видео для брендов:
на сайт
Видеопиар & яркий Flat. Использована видеография с наложением кратких промо-заголовков из текстового слайдшоу. Смелое сочетание сочных цветов – такие пары цветовых комбинаций подбирались скоморохам. Мультяшные шрифты очень кстати
Продающий сайт (мультибренд) на главной применяет фонового видео с видеографией:
на сайт
Утонченный, элегантно оформленный HTML5 сайт с необычной навигацией, интерактивом и прекрасными видео-бэкграундами
Креативный сайт цифрового агентства из Бельгии применяет плоское видео в фоне:
на сайт
Для сайта и ранее использовался плоский стиль, но после редизайна клиентов решили привлечь главным экраном с привлекательным продающим Flat видео
В завершение
Во всей массе медиа-информации (да и всего контента) главенствует видео – показывая свою эффективность в самых различных нишах интернет рынка. Результаты успешных видео-маркетинговых стратегий впечатляют! Эмоциональный видеоролик – это также отличный способ поразить клиентов. Поскольку реакция разных людей на различный видеоконтент отличается, необходимо тестировать. Проверьте на своей аудитории несколько вариантов и такой тоже: фоновое видео Vs. обычное изображение для бэкграунда сайта. Но при правильных подходах, от воспроизводимого в фоне видео можно получить немало преимуществ перед конкурентами.
Фоновые видео помогут вашему сайту выгодно выделиться и привлечь внимание читателей. Добавить данную функцию на ваш сайт совсем не сложно и не требует много действий, но при правильно выбранном видео и проигрывателе вы сможете превратить сайт из просто хорошего в удивительный!
Спасибо, отличная статья.