Делаем видео фон на чистом HTML+CSS

10.12.2021
Делаем видео фон на чистом HTML+CSS
В этой статье покажу, как сделать видео фон для сайта на чистом HTML + CSS. Так же ниже вы можете увидеть сам код. Что бы добавить видео фон на ваш сайт — достаточно просто скопировать код и изменить путь к файлам. Установка максимально простая.

Вот и сам HTML, CSS код:


Video Background

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap'); body { font-family: 'Poppins'; margin: 0; padding: 0; } .video-bg { height: 100vh; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; } .video-bg video { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100vh; object-fit: cover; } .effects { position: absolute; object-fit: cover; top: 0; left: 0; z-index: 2; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.6); } .video-bg__content { z-index: 2; color: #ffffff; font-size: 50px; } .main { max-width: 1600px; margin: 0 auto; margin-top: 50px; padding: 0 20px; }
Менеджер
Екатерина
Ведущий специалист
Консультация специалиста
Наш менеджер перезвонит вам в течении 20 минут

Менеджер
Анастасия
Эксперт
+7 (917) 159-30-11
Оставить заявку
Наш специалист свяжется с вами в течении 20 минут

Менеджер
Хорошова Анастасия
Сметчик
+7 000-00-99
Заказать расчет
Бесплатный расчет сметы в течении одного дня