Фоновое видео. 5 советов по использованию

В качестве фона мы, как правило, используем иллюстрации, градиент, простую заливку и видео. В последнее время фоновое видео становится всё более востребованным. Тем более что скорость интернета и техническая поддержка браузеров более не препятствуют дизайнерским экспериментам в этом направлении.  

Фоновое видео используют как декоративный и вспомогательный элемент. Однако веб-разработчик должен помнить, что непродуманность идеи с видео может привести к снижению скорости загрузки сайта, рассеянному вниманию пользователей и даже увеличению числа отказов и преждевременному закрытию целевой страницы.

Наш опыт показывает, что при создании видеофона следует учесть следующие моменты:

1. Сжатие видео

Сожмите видео как можно сильнее, поэкспериментируете с битрейтом. Слишком большое видео будет «тормозить» на этапе буферизации и создавать ощущение «спотыкающихся кадров».

2. Использование наложения

Полупрозрачный слой накладывают поверх видео, чтобы замаскировать низкое качество видео или скрыть неплавные переходы. Это легко сделать с использованием псеводоэлементов :after или :before.

3. Общий размер и продолжительность

Не стоит забывать, что пользователи заходят на ваш сайт не для того, чтобы посмотреть пятиминутное видео, вряд ли кто-то будет в восторге от процесса скачивания 20Мб ненужного для него файла. Поэтому имеет смысл ограничить общий объем файла до 1-2 Мб и длину до 30-40 секунд.

4. Резкое движение

Избегайте резких переходов и движений. Фоновое видео играет вспомогательную роль и должно оставаться плавным.

5. Расстановка акцентов

Текст на переднем плане должен оставаться контрастным на протяжении всего видео. Если светлые кадры сменяются темными, то для смягчения и придания эффекта размытия вы также можете использовать полупрозрачное маскирующее наложение.