ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Полноэкранный видео-фон для сайта на CSS

Полноэкранный видео-фон для сайта на CSS

Полноэкранный видео-фон для сайта на CSS
В статье представлен материал, это как можно создать адаптивным видео в качестве фона на основе видеоплейера от видео хостинга YouTube на CSS3. Что теперь есть возможность поставить красивый фон, где будет идти видео, а по вверх его есть вариант написать по тематике, что можно посмотреть на странице демонстраций. Само видео если идет со звуком, то здесь при просмотре его не будет по умолчанию.

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

Как пример:

Видео фон сайта

Установочный процесс:

HTML

Код
<div class="video-obzor-animatsion">
  <iframe src="https://www.youtube.com/embed/KHJPv7om_tY?mode=opaque&wmode=transparent&autoplay=1&loop=1&controls=0&modestbranding=1&rel=0&autohide=1&showinfo=0&color=white&iv_load_policy=3&theme=light&wmode=transparent&mute=1&playlist=fGL6ucS9hTI" frameborder="0" allow="autoplay"></iframe>

  <div class="kolakesa-videobzora">
  <h1>ZorNet.Ru — сайт для вебмастера</h1>
  <p>Теперь, предполагая, что ваше плохое соединение связано с режимом / расположением маршрутизатора, а не плохим планом провайдера, есть несколько сетевых топологий, которые вы можете использовать для вашего соединения, будь то на работе или дома.</p>
  <ul>
  <li>Скрипты для uCoz</li>
  <li>Список значков шрифта Awesome</li>
  <li>JavaScript и jQuery</li>
  <li>Шаблоны для uCoz</li>
  </ul>
  <p>Обратите внимание, что сетевые топологии делятся на две категории: физические и логические . Физические топологии описывают физическое расположение, в то время как логические топологии описывают.</p>
  </div>
</div>

CSS

Код
.video-obzor-animatsion {
  position: relative;
  overflow: hidden;
}
.video-obzor-animatsion iframe {
  position: absolute;
  top: 0px;
  left: 0;
  width: 0;
  height: 0;  
  z-index: -1;
}
.kolakesa-videobzora {
  position: relative;
  color: #fff;
  padding: 48px;
  font-size: 18px;
}
.kolakesa-videobzora:before {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;  
}

JS

Код
function setVideoCenter() {
  var $box = $('.video-obzor-animatsion');
  var height = $box.height();
  var width = $box.width();
  var new_height = width / 1.78;
  if (new_height > height) {
  $box.find('iframe').css({
  width: width,  
  height: new_height,  
  top: '-' + (new_height / 2 - height / 2) + 'px',
  left: '0',
  });  
  } else {
  var new_width = height * 1.78;
  $box.find('iframe').css({
  width: new_width,  
  height: height,  
  top: '0',
  left: '-' + (new_width / 2 - width / 2) + 'px'
  });
  }  
}

$(function(){
  setVideoCenter();
  $(window).resize(setVideoCenter);
});

Нам от видео нужен основной код, который мы прописываем в начале, остальное не нужно трогать, ведь продолжение кода плеера отвечает за то, что не будет кнопки запуска, что автоматически под грузиться и начнет показывать.

Демонстрация
25 Сентября 2019 Загрузок: 4 Просмотров: 1294 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 01 Декабря 2019 00:051
0
avatar