Видео на задний фон сайта или блока

5199

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

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

Допустим, у нас есть блок 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;
overflow: hidden;
background:#000;
height: auto;
width: 100%;
z-index: 3;
background: url(/wp-content/uploads/2020/04/art.jpg); /*фон - картинка для устройств apple*/
background-size: cover;

}
p {
font-size: 14vw;
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: auto;
z-index: -1;
top: 0;
bottom: 0;
}

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

<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: auto;
width: 100%;
z-index: 3;
background: url(/wp-content/uploads/2020/04/art.jpg);
background-size: cover;
}

.play {
width: 100%;
z-index: -2;
top: 0px;
position: absolute;
}

p {
font-size: 14vw; /* делаем шрифт "резиновым", равным 14% от ширины экрана */
color: white;
text-align: center;
padding: 5%
}

.block:before {
background: rgb(57 53 53 / 71%);
content: "";
position: absolute;
width: 100%;
height: auto;
z-index: -1;
top: 0;
bottom: 0;
}
</style>

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

Зачем нужна фоновая картинка у блока с видео?

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