ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Видео от YouTube в качестве фона на сайте

Видео от YouTube в качестве фона на сайте

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

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

Установка:

Подключаем библиотеку

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Код
<div class="videopos_monedas">
  <iframe src="https://www.youtube.com/embed/P5csD0SX8jI?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="konegau_videozapes">
  <h1>Планетный экспресс</h1>
  <p>Без сомнения, ведение блога - прибыльный онлайн-бизнес. Многие люди хотят создать блог как средство зарабатывания денег в Интернете. Но в блогах зарабатывание денег зависит от объема трафика, который вы получаете:</p>
  <ul>
  <li>Оптимизация сообщений в блогах</li>
  <li>Советы по привлечению клиентов</li>
  <li>Топ-10 SEO-приложений</li>
  <li>Конверсия веб-сайта для SEO?</li>
  </ul>
  <p>Спросите любого, кто связан с онлайн-бизнесом, о важности поисковой оптимизации веб-сайтов, и в течение нескольких секунд - или максимум минут - вы хорошо познакомитесь с ее необходимостью в цифровом маркетинге. Короче говоря, SEO имеет значение. Как один из наиболее важных аспектов цифрового маркетинга.</p>
  </div>
</div>

CSS

Код
body {
  font-size:14px;
  padding: 15px 20px;
}
.videopos_monedas {
  position: relative;
  overflow: hidden;
}
.videopos_monedas iframe {
  position: absolute;
  top: 0px;
  left: 0;
  width: 0;
  height: 0;  
  z-index: -1;
}
.konegau_videozapes {
  position: relative;
  color: #fff;
  padding: 50px;
  font-size: 20px;
}
.konegau_videozapes: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 = $('.videopos_monedas');
  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);
});

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

Как сменить видео ролик?

В ссылки находим на самом краю P5csD0SX8jI и меняем на тот ролик, который вам нужен виде фона. А как все делается, то на скрене показано, вообщем нам нужно, чтоб видео картинка по умолчанию на весь экран при выключение стала, что делаем.

Создать фон из видео на сайте

Демонстрация

Также есть еще один пример, это как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery.

HTML5 video

Красивый видео фон сайта HTML5

HTML

Код
<div class="video-box">
  <video autoplay loop muted controls="">
  <source src="/video.mp4" type="video/mp4">
  </video>
   
  <div class="video-content">
  Контент...
  </div>
</div>

CSS

Где у тега video атрибуты autoplay и loop запустят видео с повторением, muted отключит звук, controls="" – скроет элементы управления.

Далее разместим блоки с видео и контентом друг над другом и добавим затемнение видео с помощью :before и opacity: 0.5.

Код
.video-box {
  position: relative;
  overflow: hidden;
}
.video-box video {
  position: absolute;
  top: 0px;
  left: 0;
  width: 0;
  height: 0;  
  z-index: -1;
}
.video-content {
  position: relative;
  color: #fff;
  padding: 50px;
  font-size: 20px;
}
.video-content:before {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.5;  
}

Остается пропорционально растянуть и безусловно все выставить по центру. Где основном видео имеет соотношение сторон 16:9, и здесь задействуем его для расчета обновленной ширины, а также высоты:

16 / 9 = 1.78
new_height = width / 1.78 или new_width = height * 1.78

JS

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

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

Демонстрация
2020-08-05 Загрузок: 1 Просмотров: 341 Комментарий: (0)

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

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

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

Комментарий: 0
avatar