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

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