Приветствую, друзья, на страницах WebDevTips. Все мы привикли, что для фона на сайте можно использовать картинки, градиент и т.д. Но ещё можно использовать и видео! В этом уроке разберем, как сделать видео фон для сайта на чистом HTML + CSS. Так же ниже вы можете увидеть сам код. Что бы добавить видео фон на ваш сайт — достаточно просто скопировать код и изменить путь к файлам. Установка максимально простая. А для тех, кто хочет узнать больше — рекоменудю помотреть полное видео с объяснением.
Ниже вы можете увидеть скриншот, как это будет выглядеть:
Вот и сам HTML, CSS код:
<div class="video-bg">
<video src="video-bg.mp4" type="video/mp4" autoplay muted loop></video>
<div class="effects"></div>
<div class="video-bg__content">
<h1>Video Background</h1>
</div>
</div>@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;
}Если кому понравиться видео, брал его тут — pixabay. Кстати, видео с данного сайта вы можжете использовать в коммерческих целях, без указание авторства.
Спасибо, что прочли. Надеюсь, я помог вам разобраться, как же сделать видео фон для сайта, используя только HTML и CSS. Если у вас остались любые вопросы — смело задавайте их в комментариях на сайте или под видео.
Так же рекомендую ознакомиться с другими моими статьями:
1. Как сделать текст градиентом CSS.
2. Самый простой способ добавить гамбургер иконку.
Или просто зайдите на главную, и найдите полезную статью для себя.
