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

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

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