Как создать адаптивный фон для видео в HTML и CSS
В настоящее время привлечение внимания людей очень важно для веб-сайтов, и один из замечательных способов добиться этого — использовать фоновое видео позади некоторого контента на вашем сайте. Но сделать так, чтобы эти видео выглядели идеально на экране любого размера, может быть непросто.
К счастью, с помощью некоторых хитростей HTML и CSS вы можете создать видеофон, который отлично работает независимо от того, насколько велик или мал экран.
В этой статье я шаг за шагом объясню, как создать этот суперкрутой фоновый эффект для видео. Так оставайся со мной!
Вещи, которые вам могут понадобиться
Чтобы начать работу над нашим шедевром адаптивного видео, нам понадобится несколько ключевых вещей.
Во-первых, редактор кода — подойдет что угодно, от простого Блокнота до модных штанов Adobe Dreamweaver. Если он позволяет вам писать HTML и CSS, вы молодец.
Далее, современный веб-браузер,такой как Chrome, Firefox, Safari и т. д., для просмотра нашей работы.
И, наконец, самое главное — видеофайл, который можно использовать в качестве полноэкранного фона. Формат MP4, как правило, является безопасным выбором, поскольку он хорошо работает с большинством браузеров.
Имея в своем наборе эти базовые инструменты, мы готовы приступить к написанию кода! Процесс не слишком сложен, поэтому следуйте инструкциям.
Шаг 1. HTML-структура
Хорошо, давайте начнем с HTML для нашего адаптивного видео-фона.
Мы начнем с создания элемента div, который будет содержать как само видео, так и видимый контент страницы. Дайте этому div имя класса, например fullscreen-video-container, чтобы мы могли позже легко стилизовать его в CSS:
<div class="fullscreen-video-container">
<!-- Our video and text content will live here -->
</div>Затем поместите элемент <video> внутрь этого контейнера. В конечном итоге этот тег содержит видеофайл, но сначала нам нужно настроить несколько атрибутов:
<video autoplay loop muted>
<!-- We'll plug in the video source next -->
</video>autoplay— это означает, что видео автоматически начнет воспроизводиться после загрузки, без необходимости щелчка мышью.loop— когда видео заканчивается, оно возвращается к началу для непрерывного воспроизведения.muted— если вы не собираетесь устроить громкое восстание, разумно держать звук приглушенным.
Для нашего реального видеофайла мы будем использовать <source> внутри <video> тегов:
<source src="https://www.dropbox.com/scl/fi/eg0c3th4vyjnnz09cwxam/22512-328261507_tiny.mp4?rlkey=sk0uvs93a3uby17qbzdx1c3cx&raw=1" type="video/mp4">Здесь src указывает на путь к нашему видеофайлу и type дает браузеру понять, что он ожидает формат видео MP4.
Наконец, нашему контейнеру div нужно место для текста, накладывающего фон видео:
<div class="fullscreen-video-content">
<h1>Some Text</h1>
</div>Оформив эти элементы в HTML, мы заложили основу для того, чтобы сделать наше видео адаптивным фоном!
Шаг 2. Основные стили CSS
У нас есть готовый HTML. Теперь давайте сделаем немного CSS-магии!
Сначала мы поработаем над этим классом .fullscreen-video-container. Мы хотим, чтобы видео действовало как фон, но чтобы избежать ненужного пространства, мы должны сделать некоторые настройки по умолчанию в нашем CSS-файле:
* {
margin: 0;
padding: 0;
}Теперь давайте расположим контейнер относительно, потому что мы абсолютно разместим видео внутри:
.fullscreen-video-container {
position: relative;
}Далее, чтобы видеоконтейнер заполнял весь экран, установите ширину и высоту 100vh и 100vw:
.fullscreen-video-container {
height: 100vh;
width: 100vw;
}vh (высота области просмотра) и vw (ширина области просмотра) в основном означают, что они покрывают 100% видимой высоты и ширины экрана.
Давайте также добавим overflow: hidden для обрезки всего, что выливается наружу:
.fullscreen-video-container {
overflow: hidden;
}Контейнер готов! Сначала мы абсолютно позиционируем <video> относительно родительского элемента:
.fullscreen-video-container video {
position: absolute;
}Теперь установите ширину и высоту на auto. Это учитывает соотношение сторон видео при заполнении пространства:
.fullscreen-video-container video {
width: auto;
height: auto;
}Наконец, давайте добавим min-width: 100% и min-height: 100%, чтобы оно растягивало видео, чтобы заполнить его родительский контейнер, сохраняя при этом соотношение сторон:
.fullscreen-video-container video {
min-width: 100%;
min-height: 100%;
}Если вы следили за этим, ваше фоновое видео должно выглядеть примерно так:
Да, я знаю, что оно еще не идеально отцентрировано, но мы исправим это на шаге 3!
Шаг 3. Центрирование видео
Сначала используйте верхнюю и левую позиции на 50%, чтобы сместить мертвую точку точки позиционирования:
.fullscreen-video-container video {
top: 50%;
left: 50%;
}Теперь вы заметите, что фоновое видео стало меньше и сместилось в правый нижний угол:
Чтобы исправить это, используйте свойство transform:
.fullscreen-video-container video {
transform: translate(-50%,-50%);
}Наконец, установите z-index для управления порядком наложения по сравнению с другими элементами:
.fullscreen-video-container video {
z-index: -1;
}Этот низкий z-индекс, равный -1, будет отодвигать наше видео позади всего, позволяя нашему основному контенту выглядеть как «Some Text».
Вот результат:
Вы можете видеть, что наше фоновое видео идеально центрировано, заполняет весь экран и отзывчиво. Но мы еще не совсем закончили. Нам все еще нужно обработать стиль текста заголовка «Some Text».
Сейчас это просто элемент h1, лениво размещенный поверх видео. Чтобы этот контент действительно привлекал внимание и дополнял наш великолепный видео-фон, нам нужно сейчас оформить текст.
Шаг 4. Стилизация наложения контента
Мы начнем с центрирования контента по горизонтали и вертикали над видео с помощью flexbox.
Теперь добавьте это в свой fullscreen-video-container:
.fullscreen-video-container {
display: flex;
justify-content: center;
align-items: center;
}Помните, в нашем html-файле мы указали h1 родительский контейнер для fullscreen-video-content.
Теперь давайте оформим его с чистым фоном позади текста:
.fullscreen-video-content {
background-color: rgba(255,255,255,0.8);
padding: 30px;
border-radius: 5px;
}Значение rgba дает полупрозрачный белый цвет, поэтому видео немного просвечивает. Padding и border-radius добавляют хороший интервал и закругленные углы.
Чтобы стилизовать сам текст, выберите h1 (или любой другой элемент, который вы использовали):
.fullscreen-video-content h1 {
font-size: 3rem;
font-weight: 700;
color: #333;
}Мы увеличили размер шрифта, добавили жирный шрифт и придали ему темно-серый цвет текста.
Вот и все! Теперь контент должен центрироваться по вертикали и горизонтали поверх полноэкранного видео с гладким полупрозрачным фоном.
Заключение
И вот оно — все, что вам нужно знать о реализации бесшовного, адаптивного видеофона с помощью HTML и CSS!
Мы начали с создания правильной структуры HTML — контейнера div, в котором находится наш видеоэлемент, и наложения контента. Затем нужно было стилизовать это видео так, чтобы оно вело себя как полноэкранное изображение с соблюдением пропорций фона, за счет умного позиционирования и некоторых хитростей с преобразованием.
После этого мы сосредоточили внимание на содержимом наложения, центрируя его по вертикали и горизонтали с помощью flexbox. Слегка прозрачный фон помог тексту выделиться на фоне движущегося видео.
Эта техника полностью адаптивна «из коробки». Измените размер контейнера, переверните его на мобильное устройство, перейдите в полноэкранный режим — видеофон легко адаптируется, сохраняя при этом четкое качество.
