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

4516

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

Итак, приступим.

Допустим, у нас есть блок c текстом, в котором нужно cделать видео в качестве заднего фона:

Разметка блока:

<div class="block">
<p>Видеозаставка</p>
<video class="play" loop="loop" autoplay="" muted=""> /*Запускаем видео при загрузке страницы, зацикливаем его и отключаем звук*/
<source src="waves.mp4" type="video/mp4"> /*путь к ролику для фона*/
</video>
</div>

css - cтили для блока и фонового видео:

.block {
position: relative;
background:#000;
overflow: hidden; /*обрезаем видео при выходе за пределы блока*/
height: 400px;
width: 100%;
z-index: 3}
p {
font-size: 70px;
color: white;
text-align: center;
padding: 5%;}
.play {
width: 100%;
z-index: -2;
top:0px;
position: absolute}

Далее необходимо создать перекрывающий слой - overlay, чтобы текст над видео хорошо читался.

Сделаем его с помощью псевдоэлемента before:

.block:before {
background: rgb(57 53 53 / 71%);
content: "";
position: absolute;
width: 100%;
height: 500px;
z-index: -1}

Т. к. при разрешении ниже 730px видео перестанет перекрывать блок по высоте, то его можно просто отключить с помощью медиа - запроса:

@media(max-width:730px) {.play{display:none;}}

В итоге, код блока с видео будет таким:

<div class="block">
<p>Видеозаставка</p>
<video class="play" loop="loop" autoplay="" muted="">
<source src="waves.mp4" type="video/mp4">
</video>
</div>

<style>

.block {
position: relative;
overflow: hidden;
background:#000;
height: 400px;
width: 100%;
z-index: 3}
.play {width: 100%;
z-index: -2;
top: 0px;
position: absolute}
p {font-size: 70px;
color: white;
text-align: center;
padding: 5%}
.block:before {
background: rgb(57 53 53 / 71%);
content: "";
position: absolute;
width: 100%;
height: 600px;
z-index: -1}
@media(max-width:730px) {.play{display:none;}}
</style>

Чтобы сильно не снизилась скорость загрузки сайта, размер видео не должен быть больше 1-3 Мб, а продолжительность ролика - дольше 40 секунд. Так же должен быть хороший контраст между текстом и перекрывающим слоем.

Следует обратить внимание, что ролики не воспроизводятся на устройствах Apple, поэтому у блока обязательно должна быть картинка - бэкграунд.
На этом все. Надеюсь, что статья была вам полезной!
ДЕМО СКАЧАТЬ

Понравилась статья?

Оцените!