Как сделать фон для сайта видео: Делаем видео в качестве фона сайта с помощью HTML

Полноэкранный видео-фон для сайта HTML5

HTML, CSS

Karina | 16.04.2015

На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.

Демо Загрузить архив RAR (6.3 MB)

Рекомендации

Если вы твердо убеждены, что хотите установить видео для фона на сайте, необходимо знать кое-какие нюансы:

1. Во-первых, нужно обязательно помнить о том, что видеоролик имеет довольно большой вес. Это может негативно сказаться на скорости загрузки страницы, особенно если у пользователя медленный интернет. Поэтому выбирайте не слишком продолжительные по времени видеоролики. В случае, когда требуется использовать довольно длинное видео, будьте готовы либо к работе над уменьшением его веса, либо к тому, что придется жертвовать частью аудитории.
2. Во-вторых, избегайте автовоспроизведения звука из видео. Используйте либо ролики без аудио, либо добавьте возможность пользователю самому включить звук, если ему это понадобится. Автоматическое воспроизведение звука при открытии сайта считается очень дурным тоном.
3. В-третьих, нужно позаботиться о кроссбраузерности и корректном отображении и воспроизведении видео на всех устройствах, а также предоставить альтернативу видео (для тех случаев, если оно не воспроизведется). Ниже в нашем примере мы покажем, как это сделать.
4. И в-четвертых, стоит хорошо подумать, уместен ли видеофон на том сайте, где вы захотели его установить, поскольку очень легко переступить грань между оригинальностью и бесполезностью данной затеи. Видео ни в коем случае не должно отвлекать пользователя от его главной цели, по причине которой он пришел на сайт. Устанавливая видео-фон под текстовым содержимым, не забудьте проверить, насколько читабельным стал текст. Например, он может слиться с фоном в определенный момент проигрывания видеоролика (белый текст на белом фоне, черный на черном и т.
    п.).

1. HTML

Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока <div> с идентификатором video-bg находится наш фон:

<div>
    <video preload="auto" autoplay="autoplay"
    loop="loop" poster="bg/daisy-stock-poster.jpg">
        <source src="bg/daisy-stock-h364-video.mp4" type="video/mp4"></source>
        <source src="bg/daisy-stock-webm-video.webm" type="video/webm"></source>
    </video>
</div>

Для тега <video> указаны следующие атрибуты:

• width – ширина области для воспроизведения ролика;
• height – высота области;
• preload – загрузка видео вместе со страницей;
• autoplay – автоматическое воспроизведение видео;
• loop – циклическое повторение видео;
• poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно.

Далее у нас записано два тега <source>, где указаны URL-адреса видео в разных форматах – MP4 и WEBM. Зачем подключать ролик в нескольких форматах? Дело в том, что не все браузеры поддерживают один-единственный формат видео. Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл хотя бы в этих двух форматах. А атрибут

type с соответствующими значениями помогает браузеру быстрее определиться с выбором.

2. CSS

Наша таблица стилей для фона выглядит следующим образом:

#video-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    background: url(bg/daisy-stock-poster.jpg) no-repeat #94a233;
    background-size: cover;
}

#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; 
}

 @supports (object-fit: cover) {
     #video-bg > video {
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

Как видно из кода, фон установлен на всю страницу, а в качестве запасного фона задано изображение (кадр из этого же видео).

В самом крайнем случае будет задействован цвет фона #94a233.

Также в коде есть директива @supports, которая проверяет, поддерживает ли браузер свойство object-fit. Если да, то фон принимает значение cover и пропорционально отображается при разных размерах экрана.

Согласно данным с сайта caniuse.com, на сегодняшний день свойство object-fit поддерживается всеми браузерами, кроме Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android Browser 4.1-4.4.

Вот и всё. Надеемся, данный урок принес вас пользу. Если у вас есть другие интересные и простые способы установки видео в качестве фона для сайта и вы хотите поделиться ими, пишите в комментариях!

Предыдущая запись

Сервис Google: проверка сайта на mobile-friendliness

Следующая запись

Яндекс запускает новый алгоритм 14.05.15

Как сделать видео фоном сайта

Всем привет. Сегодня хотел бы вам рассказать о таком интересном эффекте, как видеофон для сайта. Кому-то покажется это полной ерундой, но на некоторых проектах это действительно неплохо сочетается с общим дизайном. Конечно, у этого эффекта много как плюсов, так и минусов и все зависит от задач, но то, что видеофон на сайте позволит выделиться среди конкурентов — факт.

Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся — и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и css код раздуть до безобразных размеров, а можно грамотно оптимизировать и сократить вес в 2-3 раза. (Кстати, об оптимизации css кода можно почитать в этой статье)

Итак пример:

Как видите, эффект очень интересный, но при условии что страничка быстро грузится. Если нет, то овчинка не стоит выделки и лучше обойтись просто картинкой в высоком разрешении, чем заставлять пользователя ждать так долго.

Кроме того, проанализируйте свой трафик, и если окажется, что много пользователей с мобильных устройств, то тем более не стоит использовать видеофон, так как мобильный интернет, пока еще, не настолько быстр. Казалось бы, очевидные вещи повторяешь много раз, но все равно находятся такие, кто этого не понимает.

Как сделать видео фоном сайта?

Разбираясь в вопросе ,как добиться эффекта с видеофоном, в свое время, я обнаружил несколько способов. Одни из них проще, другие сложнее, некоторые требуют javascript, а другие нет. Сегодня я расскажу вам о том, как добиться подобного эффекта без всяких там скриптов. Приступим…

Сразу прошу извинить за качество видео. Оно 720p, так что большие мониторы — вам привет! Прошу камнями не кидать, это только в качестве примера, а вы все равно будете подбирать под те разрешения, на которые ориентирован проект.

Итак, помните статью, в которой мы говорили про то, как вставить видео на сайт при помощи тегов html5? Сегодня знания от туда нам пригодятся. А в этой статье я не буду подробно описывать каждую строчку.

HTML разметка

Сразу после тега </body> вставьте фоновое видео на сайт следующим образом. Если хотите подробнее разобраться, читайте статью, о которой я упоминал выше.

<video autoplay loop>
 <source src="video/video2.mp4" type="video/mp4">
 <source src="video/video1.webm" type="video/webm">
 <source src="video/video3.ogv" type="video/ogg"/>
</video>
 
<p>Smartlanding</p>

CSS разметка

Для того, чтобы видео занимало всю ширину экрана и фон был неизменным на всем сайте — добавьте следующие стили:

video{
   position:fixed;
   z-index:-1;
   min-width:100%;
   min-height:100%;
   overflow:hidden;
}
p{
 font-family: 'courgette';
 color:#fff;
 font-size: 80px;
 text-align: center;
 padding-top: 20%;
 text-shadow: 0 1px 1px #000a33;
}

Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute. Буду искать еще способы подключения видео в качестве фона, так как не люблю я это абсолютное позиционирование. Даже текст подвинул padding_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

Если вам известны другие способы реализации подобного эффекта, то пишите в комментариях — обсудим.

Скачать исходник

Как сделать фоновое видео для главной страницы вашего сайта

Clipchamp — бесплатный онлайн-редактор видеоПопробуйте бесплатно

Поделитесь этой публикацией

На этой странице

• Что такое фоновое видео?
• Примеры фонового видео 
• Как создать фоновое видео для главной страницы вашего веб-сайта
• Хотите узнать больше?

По всему Интернету статические страницы веб-сайтов уходят в прошлое, поскольку привлекательные видеофоны становятся все более популярными. Видеофон при правильном использовании может привлечь внимание посетителей и задать тон и настроение веб-сайта. Это также может привести к конверсиям — по данным Forbes, включение видео на целевую страницу может увеличить коэффициент конверсии на 80 процентов.

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

• Что такое фоновое видео?

• Примеры фонового видео.

• Как создать фоновое видео для главной страницы вашего сайта.

Что такое фоновое видео?

Как следует из названия, фоновое видео — это видео, которое воспроизводится на фоне вашего веб-сайта. Чаще всего они расположены на главной странице веб-сайта, поскольку являются отличным инструментом для передачи посетителям идентичности и истории бренда. В отличие от обучающих видеороликов или демонстраций продуктов, цель фоновых видеороликов — продвигать внешний вид и настроение, а не информацию. Они часто бывают короткими (до 30 секунд), содержат едва заметный звук или вообще не содержат его, а также содержат мало текста или вообще не содержат его.

Примеры фонового видео 

Чтобы помочь вам вдохновиться при создании фонового видео, мы собрали несколько замечательных примеров веб-сайтов, на которых используется фоновое видео.

Mediaboom

Mediaboom — это агентство цифрового маркетинга, которое использует фоновое видео на своей домашней странице, чтобы показать информацию о своей компании. Делая видео черно-белым, текст поверх носителя не теряется и по-прежнему легко читается. Отображая различные аспекты своей компании в видео, посетители могут общаться с компанией на более глубоком уровне, а не просто читать вкладку «О нас». В немом видео показаны клиент и сотрудник, их рабочее пространство, офисы и технологии, используемые для создания и демонстрации их услуг.

Venem 1.0

Venem 1.0 — австралийский модный лейбл, демонстрирующий фоновое видео в другом свете и форме. Отображение предварительного просмотра новых поступлений с помощью видео — отличный способ побудить посетителей изучить и нажать на CTA. Фоновое видео креативно и увлекательно.

The Cliffs

Компания The Cliffs, занимающаяся недвижимостью, использует классический подход к своему фоновому видео. Их видео рассказывает историю о семи частных роскошных жилых комплексах, демонстрируя окружающую дикую природу, сельское хозяйство и мероприятия на свежем воздухе. Добавление простого текста придает фоновому видео глубину. Поскольку веб-сайт просто показывает посетителям то, что они могут предложить, видео дает зрителям визуально запоминающиеся впечатления.

Project Skin MD

Project Skin MD выводит фоновое видео на совершенно новый уровень, демонстрируя повествование на протяжении всего видео. Начальная сцена — это клиент, который входит в клинику и регистрируется на стойке регистрации. Затем история начинает рассказывать, какой опыт могут ожидать клиенты при посещении. Помещения, персонал, средства по уходу за кожей, лазер, продукты для продажи и счастливое обслуживание клиентов показаны на протяжении всего видео. Опять же, здесь минимум текста, а один и тот же слоган отображается поверх видео на протяжении всего видео.

Как создать фоновое видео для главной страницы вашего веб-сайта

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

Clipchamp — это не только бесплатный и простой в использовании видеоредактор, но и обширная библиотека стоковых материалов, наполненная профессиональными видеоматериалами. Чтобы показать вам, как извлечь из этого максимальную пользу, мы создали пошаговое руководство о том, как создавать фоновые видеоролики для главной страницы вашего веб-сайта.

Шаг 1. Начните с создания учетной записи Clipchamp

Войдите в существующую учетную запись Clipchamp или зарегистрируйтесь бесплатно.

Шаг 2. Создайте новый проект

Нажмите кнопку Создать видео на левой боковой панели. Выберите один из пяти различных форматов видео и выберите тот, который лучше всего подходит для вашего проекта. Мы рекомендуем использовать широкоэкранный формат с соотношением сторон 16:9 при загрузке на домашнюю страницу веб-сайта в качестве фонового видео.

Шаг 3. Добавьте личные видеоматериалы или стоковые видеоматериалы

Нажмите кнопку Stock на левой панели инструментов и прокрутите варианты видеоматериалов. Добавьте отснятый материал в свою библиотеку, нажав кнопку + Добавить в правом верхнем углу видео. Выбранные клипы будут автоматически загружены в вашу медиатеку. Кроме того, вы можете добавить свои собственные кадры, нажав кнопку Добавить медиа на левой панели инструментов, а затем импортировать видеофайлы со своего компьютера.

Шаг 4. Добавление и редактирование материалов на временной шкале 

Перетащите видеозапись на временную шкалу. Поместите каждый клип в предпочитаемую последовательность. Если вы уроните клип не в том месте, не волнуйтесь. Вы можете перемещать их столько раз, сколько захотите. Теперь вы можете обрезать продолжительность клипа, используя инструмент «Ножницы» или перетаскивая зеленые боковые полосы клипов. Измените его цветовой баланс, добавьте фильтр или оставьте как есть. Мы рекомендуем снизить экспозицию клипов или сделать цвет черно-белым, чтобы текст выделялся для посетителей.

Шаг 5. При необходимости добавьте движущиеся титры

Пришло время добавить текст. Конечно, вам не нужно ничего добавлять. Нажмите Текст на левой боковой панели и выберите заголовок, который вы предпочитаете. Перетащите заголовок на временную шкалу над определенным клипом. Вы можете изменить длину текста, перетаскивая зеленую боковую панель влево и вправо. После размещения в правильном месте настройте текст и измените размер, цвет и положение.

Шаг 6. Экспортируйте проект

Нажмите кнопку Экспорт в правом верхнем углу редактора. Здесь вы можете выбрать настройки разрешения, в котором вы хотите загрузить свой проект. Для загрузки веб-сайта мы рекомендуем 1080p и выберите сжать мой размер файла для более быстрой загрузки. Наконец, нажмите кнопку Продолжить и подождите, пока ваше видео будет экспортировано. Отсюда вы можете сохранить видео на свой компьютер или поделиться им напрямую в социальных сетях.

Хотите больше?

Не забудьте посмотреть другие наши обучающие видео и блоги, чтобы узнать больше советов и рекомендаций по созданию потрясающих видео!

Поделиться этой публикацией

Вернуться в блог Clipchamp

Как сделать фоновое видео для главной страницы вашего сайта

Пятнадцать секунд. Именно столько времени в среднем пользователь проведет на вашем сайте, прежде чем уйти. Когда у вас есть всего четверть минуты, чтобы произвести хорошее впечатление, дизайн вашей домашней страницы может иметь решающее значение для привлечения пользователя или его потери навсегда. Но знаете ли вы, что люди проводят на сайтах с видео на 88 % больше времени? Видео привлекает внимание и отлично подходит для мгновенной передачи жизненно важной информации о бренде. Включение фонового видео на вашу домашнюю страницу — это суперэффективный и простой способ привлечь внимание ваших посетителей и побудить их к действию.

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

Что я должен включить в фоновое видео моей домашней страницы?

Независимо от того, решите ли вы включить видеофон на свой веб-сайт или нет, важно понимать, какие элементы в целом создают хорошую домашнюю страницу. Есть несколько важных компонентов, которые являются обязательными:

• Элементы брендинга: Убедитесь, что вы показываете пользователям, что они нашли ваш бренд, используя согласованные элементы, такие как логотип, цветовая схема и внешний вид.

• Заявление о ценности бренда: Что вы предлагаете и чем вы отличаетесь? Не забудьте попытаться свести ваш бренд к основам, чтобы даже те, у кого есть склонность к снятию сливок, ушли с правильным сообщением. Если вы уверены, что включить, рассмотрите пять «W» — кто, что, где, когда и почему — чтобы охватить все ваши основы.

• Индивидуальность бренда: Ваш бренд игривый и веселый или серьезный и элегантный? Убедитесь, что ваш контент отражает вашу атмосферу! Это поможет дать вашим клиентам сплоченный опыт и ускорить узнаваемость вашего бренда.

Знаете ли вы?

Люди проводят на сайтах с видео до 88% больше времени.

Вы также захотите включить основные функции взаимодействия с пользователем, такие как:

• Привлекательные изображения и цвета: Даже если атмосфера вашей компании больше черно-белая, не забудьте выбрать цветовую палитру и придерживаться ее.

• Четкий призыв к действию: В конечном счете, вы хотите, чтобы ваши люди действовали на вашем сайте. Убедитесь, что вы сообщаете им, что это такое, и уберите все блокировщики, чтобы направлять ваших клиентов именно туда, куда вы хотите.

• Привлекательный текст: Нам нравятся привлекающие внимание визуальные эффекты, но убедитесь, что вы дополняете пользовательский опыт соответствующим забавным текстом. Это отличное место для изучения индивидуальности вашего бренда, так что проявите творческий подход!

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

Как дизайнер, я очень забочусь о представлении и опыте, который получают наши клиенты, просматривая наш контент или просматривая наш сайт. Функции Vimeo по умолчанию создают красивый видеоплеер».

Анна Консен, дизайнер Bloomscape

Примеры фонового видео для веб-сайтов, которые мы любим

Мы должны поговорить о чем-то. Насколько видео может улучшить ваш веб-сайт, настолько же легко оно может и отвлечь от него. Никто не хочет чувствовать себя перегруженным звуком автовоспроизведения и гиперактивной графикой. Но у 58% компаний есть видео на главной странице, а это значит, что некоторые бренды делают это правильно. Ключ в том, чтобы создать видео, которое вызовет немедленный положительный эмоциональный отклик и, в конечном счете, вызовет действие пользователя. Видеофон главной страницы может быть особенно полезен для брендов, которые предлагают визуально привлекательные продукты, представляют особый стиль жизни или предоставляют уникальные впечатления.

Y.Co

Домашняя страница яхтенного бренда Y.Co сразу же вовлекает вас в приключения в открытом море. При посадке на этот сайт не возникает вопроса, что это за бренд — качественные, мощные гидроциклы для людей, любящих роскошь и океан. Этот сайт умело и стратегически использует текст на главной странице, чтобы легко вплести призывы к действию в пользовательский опыт.

Медиабум

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

Patagonia

Patagonia известна производством качественной одежды и снаряжения для людей, которые любят активный отдых на свежем воздухе. Видео на веб-сайте Patagonia сразу же перенесет вас в несколько красивых и захватывающих мест под открытым небом, показывая великолепные высококачественные видео людей, занятых различными приключенческими мероприятиями. Этот сайт использует видео, чтобы непосредственно познакомить вас с образом жизни этого бренда и быстро просмотреть дух их компании.

Как сделать фоновое видео для веб-сайта

Для тех из нас, кто не является профессиональным техническим специалистом, идея включения видео фона веб-сайта на домашнюю страницу может показаться немного пугающей. Однако с помощью правильных инструментов любой, у кого есть бизнес или веб-сайт, может это сделать. Vimeo Create имеет тонн шаблонов, которые упрощают создание потрясающих полноразмерных видео для встраивания на ваш веб-сайт или в любое место в Интернете. Вот как это сделать.

1. Выберите шаблон в Vimeo Create.

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

2. Загрузите отснятый материал (или скачайте его из нашей библиотеки)

Когда дело доходит до выбора исходного материала для фонового видео, у вас есть два варианта: вы можете либо захватить свой собственный материал, либо использовать огромную стоковую библиотеку Vimeo для быстрого доступа к высококачественному видео. Давайте рассмотрим ваши варианты.

Съемка собственного фонового видео

Если вы хотите продемонстрировать свой реальный продукт, рабочее место или сотрудников, вы можете потратить время и деньги, чтобы снять персонализированное видео для фона вашего веб-сайта. Просто не забудьте отдавать приоритет качеству и видео в высоком разрешении, если вы собираетесь заниматься своими руками. Вы хотите произвести наилучшее первое впечатление!

Использование стоковых видеороликов для фона веб-сайта

Если ваши личные кадры не совсем на высоте (или у вас просто нет времени, мы это понимаем) — вы можете использовать наше предварительно загруженное стоковое видео в качестве фона вашего сайта. Мы предлагаем тысячи бесплатных видеороликов, созданных одними из ведущих онлайн-создателей, и мы уверены, что вы сможете найти идеальное видео для захвата изображения, которое вы хотели бы изобразить.

3. Настройте по своему вкусу

Vimeo Create позволяет добавлять текст, собственный фирменный стиль (включая логотип!) и многое другое. Просто обрежьте видео до нужной длины, добавьте любой соответствующий текст и наклейки с изображениями, и все готово. Это делает добавление текстовых CTA очень простым, поэтому встроить их в свой веб-сайт проще, чем когда-либо.

4. Сохраняйте и делитесь!

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

Как встроить фоновое видео веб-сайта:

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

1. Чтобы встроить фоновое видео, сгенерируйте код для встраивания и добавьте параметр «?background=1» в конец URL-адреса. Это отключит все переключатели проигрывателя, поместит видео в автоматический цикл, настроит автоматическое воспроизведение видео и обеспечит приглушение звука видео. В принципе, все, что вам нужно для создания видео фона!
   
2. Если вы хотите, чтобы ваш фоновый видеоролик имел звук, просто добавьте параметр «muted=0» в свой код для встраивания. Чтобы узнать больше об использовании Vimeo для встраивания фоновых видео, ознакомьтесь с нашим полным подробным руководством.

Как мне сделать видео для моего сайта?

Существует множество способов создать видео, которое можно разместить на главной странице или на вашем веб-сайте.

Vimeo Create предлагает множество бесконечно настраиваемых шаблонов, упрощающих работу.

Краткие советы для фонового видео

1. Используйте короткий цикл видео : Лучшие фоновые видео обычно представляют собой относительно короткие циклы. Выбирайте видео, которые могут предложить плавный, бесконечный цикл, рассказывающий историю или передающий изображение. (Кроме того, длинные видео могут сделать время загрузки вашего сайта медленным, что плохо для пользователей и SEO!
   
2. Не торопитесь, выбирая правильное видео : Выбор видео, которое не передает правильное сообщение, хуже чем вообще не использовать видео. Не торопитесь, чтобы выбрать качественное видео с релевантными изображениями, которые соответствуют тону, который вы ищете.
   
3. Чем меньше, тем лучше : Хотя легко увлечься использованием самых передовых наворотов на своем веб-сайте, убедитесь, что фоновое видео не отвлекает внимание от основной цели вашего сайта. Суперкрутое видео бесполезно, если оно приводит к более высокому показателю отказов или сбивает пользователя с толку.