• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать адаптивный видео фон для блока на CSS (Как сделать адаптивное видео bootstrap для сайта)
Создать адаптивный видео фон для блока на CSS
Kosten
Дата: Воскресенье, 2019-02-03, 23:25 | Сообщение 1
Администраторы
Сообщений:24253
Награды: 56


Вашему вниманию простой код в адаптивной верстке, где создаем красивый видео фон на сайте или отдельной страницы интернет ресурса. Сам код идет простой, но полностью рабочий. Также в коде привнесен дизайн, который создан специально для видео, которое по умолчанию поставлено под ссылку. Это сделано для этого видео ролика, если ставить будете другие, то можно посмотреть, подойдет он или нет, здесь веб разработчику самостоятельно решать.

Также есть и другой вариант на видео фон, где кардинально установка не сильно изменяется, но сделано по разному, и совершенно в разных ракурсах. А так при открытие страницы вы увидите фон. который проиллюстрирует видео, какое оно будет, это зависит больше от тематики или созданной темы, где оно присутствует.

При проверки материала так смотрится на изображение.



Приступаем к установке:

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;
  }
}

На этом установка закончена, что можно посмотреть как получилось.

Демонстрация
Прикрепления: 3399117.jpg(61.7 Kb) · css.zip(2.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать адаптивный видео фон для блока на CSS (Как сделать адаптивное видео bootstrap для сайта)
  • Страница 1 из 1
  • 1
Поиск: