В эпоху цифрового дизайна, фоновое видео на веб-странице становится не просто трендом, но и эффективным инструментом для привлечения внимания посетителя. Отлично подобранное и качественно интегрированное видео способно усилить визуальное воздействие, добавить динамики и глубины в общее впечатление от сайта. В этой статье мы покажем, как можно добавить видео на фон веб-страницы, используя 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; /* Видео растягивается, чтобы покрыть весь контейнер, сохраняя пропорции */
}
Комментарии
0