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

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

Safari отображает семизначные числа как номера телефонов

Суть проблемы — мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон….

Задать цвет плейсхолдеру (placeholder)

Для различных вариантов дизайна страниц нужно указывать разный цвет для плейсхолдеров в формах. Рассмотрим такой…

Связь слайдов owl-carousel с другими блоками

В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке,…

Скопировать текст в буфер обмена нажатием на кнопку

Задача простая — копировать текст из какого-то блока нажатием кнопки, например, это может быть код…

7 комментариев

Дмитрий

Спасибо! Полезная инфа, и вообще весь сайт!

В телефонах не показывает видос, а просто фон картинка

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

Антон

Видео как бы не зациклено, что плохо, видно как прерыв есть.

Да, есть такое, это просто первое попавшееся под руку видео

Спасибо за пример, подскажите, как его оставить только на главной странице, что бы на остальных его не было? У меня на всю ширину могу только грузить код в тело сайта, но видео шапки теперь на всех страницах(

Я ж не вижу ваш код, но как самый простой вариант — просто привязать стили к классу Главной страницы, или самому указать класс для Главной страницы, если это можно, и только для него писать правила под видео.

.body .page {}

Но ведь нужен еще блок с самим видео и его не нужно выводить на всех страницах, тогда лучше для Главной создать свой темплейт, и весь код нужный только для этой страницы помещать в этот шаблон, здесь же и добавить отдельный класс, который будет использоваться только для этого шаблона.

Ответить