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

Скачать актуальный код видеофона для сайта можно здесь.

Шаг 1: Подготовка HTML-структуры

Для начала создайте основную структуру вашего HTML-документа. В нашем случае используется раздел <section> с классом promo, который будет содержать фоновое видео и другой контент:

<section class="promo">
  <!-- Контент -->
  <div class="promo__content">
    <div class="promo__container">...</div>
  </div>

  <!-- Маска для видео -->
  <div class="promo__mask"></div>

  <!-- Фоновое видео -->
  <video class="promo__video" autoplay muted loop>
    <source src="./videos/your-video.mp4" type="video/mp4" />
    <!-- Сообщение для несовместимых браузеров -->
    Your browser does not support the video tag.
  </video>
</section>

В этой разметке:

Контент: предназначен для размещения любого текстового или визуального контента, который должен отображаться поверх видео.
Маска для видео: используется для создания полупрозрачного эффекта над видео, что улучшает читаемость текста и других элементов, расположенных на видеофоне.
Фоновое видео: отвечает за встраивание и автоматическое воспроизведение видео в качестве фона секции. Атрибуты autoplay, muted и loop обеспечивают: автоматическое воспроизведение, отключают звук и зацикливают видео.
Сообщение для несовместимых браузеров: отображается, если браузер пользователя не поддерживает элемент <video>.

Шаг 2: Стили для контента и видеофона

Теперь перейдем к стилизации с помощью CSS. Наша задача — убедиться, что видео правильно отображается как фоновый элемент.

/* Основной контейнер секции */
.promo {
  width: 100%;            /* Ширина равна 100% родительского элемента */
  height: 100vh;          /* Высота равна 100% видимой области экрана (viewport height) */
  position: relative;     /* Для позиционирования дочерних элементов относительно этого блока */
  overflow: hidden;       /* Скрывает содержимое, выходящее за границы блока */
}

/* Контейнер для содержимого внутри .promo */
.promo__content {
  position: absolute;     /* Абсолютное позиционирование относительно .promo */
  width: 100%;            /* Ширина равна ширине .promo */
  height: 100%;           /* Высота равна высоте .promo */
  display: flex;          /* Использование flexbox для выравнивания внутренних элементов */
  justify-content: center;/* Горизонтальное выравнивание содержимого в центре */
  align-items: center;    /* Вертикальное выравнивание содержимого в центре */
  flex-direction: column; /* Внутренние элементы располагаются вертикально */
  z-index: 3;             /* Порядок наложения, обеспечивает, что контент будет над маской и видео */
}

/* Контейнер внутри .promo__content */
.promo__container {
  width: 100%;            /* Ширина равна 100% .promo__content */
  max-width: 800px;       /* Максимальная ширина контейнера ограничена 800px */
  text-align: center;     /* Выравнивание текста по центру */
}

/* Стили маски для видео */
.promo__mask {
  position: absolute;     /* Абсолютное позиционирование относительно .promo */
  top: 0;                 /* Верхний край прижимается к верху .promo */
  left: 0;                /* Левый край прижимается к левому краю .promo */
  width: 100%;            /* Ширина равна 100% .promo */
  height: 100%;           /* Высота равна 100% .promo */
  z-index: 2;             /* Порядок наложения, маска расположена над видео, но под контентом */
  background-color: #1a2238; /* Цвет фона маски */
  opacity: 0.8;           /* Прозрачность маски, делает фоновое видео менее ярким */
}

/* Стили для фонового видео */
.promo__video {
  position: absolute;     /* Абсолютное позиционирование относительно .promo */
  top: 50%;               /* Позиция от верха родительского элемента */
  left: 50%;              /* Позиция от левого края родительского элемента */
  transform: translate(-50%, -50%); /* Центрирование видео */
  width: 100%;            /* Ширина равна 100% .promo */
  height: 100%;           /* Высота равна 100% .promo */
  z-index: 1;             /* Наименьший порядок наложения, видео находится в самом низу */
  object-fit: cover;      /* Видео растягивается, чтобы покрыть весь контейнер, сохраняя пропорции */
}