Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока с помощью 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
Один комментарий к “Как создать блок с видео-фоном на сайте”
Дмитрий
Спасибо! Полезная инфа, и вообще весь сайт!