Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока с помощью CSS). Но в статье было много лишнего кода из рабочего проекта, что могло усложнить восприятие кода и использование его в других проектах, поэтому сейчас попробую сделать чистый пример, который с минимальными правками можно будет использовать в любом своем проекте.
HTML-код блока с видео в качестве фона:
<div class="page">
<div class="page-video">
<video class="video" loop="loop" autoplay="" muted="" poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
<source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4" />
<source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv" />
<source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm" />
</video>
</div>
<div class="content">
<h1 class="title">Video background for block</h1>
</div>
</div>
.page-video
– это блок с видео-фоном, его можно просто добавить в любой уже существующий блок, например, блок .page
, главное, потом добавить нужные стили.
.content
– блок с любым контентом.
И теперь код стилей CSS для видео-фона:
.page {
position: relative;
min-height: 100vh;
width: 100%;
}
.page-video {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
}
.page-video:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.page-video .video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}
.content {
position: relative;
z-index: 2;
}
Я постараюсь разобрать, чтобы было понятно, что и зачем в стилях прописано. Но должен отметить, что видел множество примеров для блоков с фоновым видео, и везде были какие-то свои ошибки. Данную версию кода считаю идеальной.=)
Имена для классов и HTML-код сделаны максимально просто, чтобы код был легким и понятным, у вас это может выглядеть совсем иначе, но здесь главное понять логику, как это делается, и тогда вы сможете добавить видео-фон в любой проект.
Основной контейнер спозиционирован относительно, чтобы внутри него можно было споционировать нужные блоки абсолютно, ширина 100%, высота может быть любая, можеть быть 100vh, может быть несколько экранов, но у нас задана минимальная высота 100vh (один экран), потому что мало контента:
.page {
position: relative;
min-height: 100vh;
width: 100%;
}
Основной блок, в котором находится видео, спозиционирован абсолютно и растянут на весь родительский блок по ширине и по высоте, и все, что будет выходить за рамки данного блока будет обрезаться:
.page-video {
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
}
Данное правило создает маску с прозрачностью 50%, которая будет над видео для того, чтобы текст поверх блока с видео был читабельный и для того чтобы скрыть низкое качество максимально сжатого видео (эта маска необязательно, но в 90% случаем используется, для маски так же можно задавать полупрозрачную картинку с нужным рисунком):
.page-video:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
И самое главное правило для нашего видео. Видео спозиционировано абсолютно относительно его родительского блока (.page-video
), при этом у меня видео центрируется, то есть я задаю ему позицию слева и сверху по 50%, и потом свойством transform сдвигаю его вверх и слева на половину своего размера. А его размеры я задаю, чтобы были минимум 100%, здесь у многих ошибка, что размеры задаются или просто 100% или фикс размером, что приводит к случаям, когда на разных экранах сбоку видео появляется пустое место. Но в чем минус моего подхода, что видео получается пропорционально растянутым на маленьких экранах, то есть слишком большим.
.page-video .video {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}
Для всех остальных блоков, которые должны отображаться над видео нужно указать относительное позиционирование и z-index
больший чем у блока с видео-фоном, в нашем случае блока .page-video
.content {
position: relative;
z-index: 2;
}
Для мобильных устройств лучше отключить видео и подставить картинку, какой-то кадр из видео:
@media (max-width: 992px) {
.page-video {
background: url(https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg)
50% 50% no-repeat;
background-size: cover;
}
.page-video .video {
display: none;
}
}
Пример того, как будет выглядеть правильный блок с фоновым видео
See the Pen Video for background of the block by Denis (@deniscreative) on CodePen.dark
Комментарии (5) к “Как создать блок с видео-фоном на сайте”
Дмитрий
Спасибо! Полезная инфа, и вообще весь сайт!
Denis Hik
В телефонах не показывает видос, а просто фон картинка
Denis Creative
“Для мобильных устройств лучше отключить видео и подставить картинку, какой-то кадр из видео”
Антон
Видео как бы не зациклено, что плохо, видно как прерыв есть.
Denis Creative
Да, есть такое, это просто первое попавшееся под руку видео