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

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

Демонстрация
05 Августа 2020 Загрузок: 3 Просмотров: 1101 Комментариев: (6)

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

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

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

Комментарии: 6
flixgoinfo
flixgoinfo 04 Декабря 2021 22:101
0
07a 07a 07a 07a 07a 07a 07a 07a 07a
FeStemBer
FeStemBer 04 Декабря 2021 22:502
0
А в чем причина в задумчивости - ведь все показывает и по вверх можно свой текст накидать.
flixgoinfo
flixgoinfo 04 Декабря 2021 23:033
0
Хали.
Вы не дадите мне изменить код.
Kosten
Kosten 05 Декабря 2021 00:055
0
В каком плане изменить? Ведь вы сами можете перенести на сайт codepen.io и изменить, так как вы считаете, а также в дальнейшем показать, как получилось. Просто в комментариев оставить ссылку на сайт codepen.io с измененными функциями или дизайном.
flixgoinfo
flixgoinfo 05 Декабря 2021 22:036
0
Хорошо, Костен!

Вот ссылка: https: //codepen.io/kocsten/pen/QWNWEja

Это не приносит мне никакой пользы при обмене HTML-ссылками.

Вот например "https://www.youtube.com/embed/tynOHOqy1nQ"

Благодарность
flixgoinfo
flixgoinfo 04 Декабря 2021 23:054
0
Но демонстрационная часть позволяет вам изменить код.
avatar