Вашему вниманию простой код в адаптивной верстке, где создаем красивый видео фон на сайте или отдельной страницы интернет ресурса. Сам код идет простой, но полностью рабочий. Также в коде привнесен дизайн, который создан специально для видео, которое по умолчанию поставлено под ссылку. Это сделано для этого видео ролика, если ставить будете другие, то можно посмотреть, подойдет он или нет, здесь веб разработчику самостоятельно решать.
Также есть и другой вариант на видео фон, где кардинально установка не сильно изменяется, но сделано по разному, и совершенно в разных ракурсах. А так при открытие страницы вы увидите фон. который проиллюстрирует видео, какое оно будет, это зависит больше от тематики или созданной темы, где оно присутствует.
При проверки материала так смотрится на изображение.
Приступаем к установке:
HTML
Код
<section class="monezation">
<video class="video" loop="loop" autoplay="" muted="">
<source src="http://denis-creative.com/wp-content/uploads/2018/01/video.mp4" type="video/mp4" />
<source src="http://denis-creative.com/wp-content/uploads/2018/01/video.ogv" type="video/ogv" />
<source src="http://denis-creative.com/wp-content/uploads/2018/01/video.webm" type="video/webm" />
</video>
<div class="gsadeeve-nuestreams">
<img src="http://zornet.ru/ABVUN/Abas/about-header-bg-25.png" class="gsadeeve-nuestreams-bg-2" alt="">
</div>
<div class="sownedesp-andensorov">ZorNet - портал для вебмастера</div>
<div class="seboubran-dangeven"></div>
</section>
CSS
Код
.monezation {
padding: 300px 0;
background-color: #0d2562;
color: #fff;
overflow: hidden;
position: relative;
}
.sownedesp-andensorov {
font-family: sans-serif;
font-size: 70px;
text-align: center;
position: relative;
opacity: .5;
}
/* VIDEO */
.video {
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 1938px;
transform: translate(-50%, -50%);
opacity: 0.5;
}
.gsadeeve-nuestreams {
position: absolute;
top: 0;
width: 100%;
height: 110px;
-webkit-background-size: cover;
background-size: cover;
background: url(http://zornet.ru/ABVUN/Abas/about-header-bg.png)
0 top no-repeat;
}
.seboubran-dangeven {
position: absolute;
bottom: 0;
width: 100%;
height: 126px;
-webkit-background-size: cover;
background-size: cover;
background: url(http://zornet.ru/ABVUN/Abas/about-footer-bg-1.png)
0 top no-repeat;
}
.gsadeeve-nuestreams-bg-2 {
position: absolute;
left: 50%;
top: 0;
z-index: 1;
transform: translate(-50%, -100%);
transition: transform 0.9s 0.2s ease;
will-change: transform;
transform: translate(-50%, 0);
}
@media (max-width: 768px) {
.monezation {
background: url(http://zornet.ru/ABVUN/Abas/about-bg-3.jpg)
0 top no-repeat #0e438b;
-webkit-background-size: cover;
background-size: cover;
}
.video,
.gsadeeve-nuestreams,
.seboubran-dangeven,
.gsadeeve-nuestreams-bg-2 {
display: none;
}
}
@media (max-width: 480px) {
.sownedesp-andensorov{
font-size: 40px;
}
}
На этом установка закончена, что можно посмотреть как получилось.
Демонстрация
