Як створити веб-сайт, використовуючи відео з YouTube в якості фону?



Великі відео на задньому плані веб-сайтів — досить популярний тренд у веб-дизайні. Вміло застосовані відео можуть зробити веб-сайт більш драматичним і привабливим для користувачів.

Крім того відео-фони можуть відтворюватися плавно і без «гальм» на відміну від фонів, створені за допомогою JavaScript, які вимагають завантажити певний код і зображення перш ніж користувач побачить результат анімації.

Існують компанії, як, наприклад, Powerhouse або Adidas, які використовують відео в якості заднього плану сайту, щоб донести до користувача певне повідомлення або історію про продукт або послугу.

Хоча і найбільш популярним способом створення відео-фону є використання HTML5 відео тега разом з деякими параметрами CSS, варто також звернути увагу на альтернативні джерела відео, наприклад, YouTube. В цьому випадку, вам не доведеться переживати про повільному відповіді сервера, тому що запит буде відправлятися навпростець в YouTube.

У цій статті я покажу вам, як можна побудувати кльовий сайт, що використовує відео з YouTube в якості фону. Ми будемо використовувати jQuery.mb.YTPlayer.js для редагування і управління зовнішнім виглядом нашого відео. Отже, приступимо!

Завантажити вихідні коди
Демо

Вам знадобляться:
Налаштування
Перш ніж розпочати створення самого сайту, нам необхідно визначити, що повинен побачити користувач. Ви повинні врахувати наступні пункти, перш ніж приступити до роботи:
  • Тривалість відео повинна становити 15-30 секунд.
  • Воно має бути налаштований на автовідтворення (autoplay).
  • Гучність повинна стояти на нулі.
  • Переконайтеся, що заголовок і інший текст читається на тлі відео.
  • Повідомлення, яке несе в собі відео, має бути ясним і чітко сформульованим.
HTML
Наш шаблон буде складатися з трьох секцій:
  • Big-background — фонове відео
  • About-section — «про нас»
  • Small-background-section — «поділитися»


<section class="big-background">
//Big Background Content here
</section>
<div class="wrapper">
<section class="about-section">
//About Section Content here
</section>
<section class="small-background-section">
//Small Background Section Content here
</section>
</div>


Тепер необхідно наповнити кожну секцію вмістом. У секції big-background і small-background-section, помістіть клас pattern, щоб створити легку текстуру на нашому відео. Також потрібно додати h1, h2, параграф і кнопку.

<section class="big-background">
<a id="bgndVideo" class="player" data-property="{videoURL:'http://www.youtube.com/watch?v=PKGjG_ZhF-A',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a> 
<div class="pattern"></div> 
<div class="big-background-container">
<h1 class="big-background-title">YOUTUBE</h1>
<div class="divider"></div>
<h1 id="colorize">ВІДЕО НА ЗАДНЬОМУ ПЛАНІ</h1>
<a href="http://designmodo.com/video-background-website/" class="big-background-btn">Хочу навчитися цьому</a>
</div> 
</section> 

<div class="wrapper">
<section class="about-section">
<div class="about-section-container">
<h2 class="about-section-title">Ставте будь-яке відео з YouTube на фон сайту</h2>
<p>Хочете знати, як додати відео на задній план вашого сайту? <br/>Це простіше простого! За допомогою jQuery MB.YTPlayer, плагін jQuery, ви можете вставити будь-яке відео з YouTube на фон сайту.<br/> Ви з легкістю зможете перетворити будь-яке відео в HTML фон. Ніяких затримок у завантаженні сторінки і навантаження на сервера!</p>
<a href="https://github.com/pupunzi/jquery.mb.YTPlayer" target="_blank" class="about-section-btn">Завантажити плагін зараз</a>
</div>
</section>

<section class="small-background-section">
<div class="pattern"></div>
<div class="small-background-container">
<h2 class="small-background-title"><span>Ми з соціальних мережах</span></h2>
<ul class="socials">
<li><a href="https://www.facebook.com/designmodo" target="_blank"><i class="fa fa-facebook-square fa-3x"></i></a></li>
<li><a href="https://twitter.com/Designmodo" target="_blank"><i class="fa fa-twitter-square fa-3x"></i></a></li>
<li><a href="https://plus.google.com/+Designmodo" target="_blank"><i class="fa fa-google-plus-square fa-3x"></i></a></li>
</ul>
</div>
</section>

Я використовував шрифт Font Awesome для соціальних іконок, які розташовуються в секції small-background-section. Потім ми додамо шаблон для нашого відео, використовуючи плагін jQuery.mb.YTPlayer. Помістіть наступний код відразу ж за <section class=«big-background»>.

<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=0WhoCe_2jpc', containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>


Ось, що ми використовували для налаштування відео:
  • class player — цей клас використовується плагіном mb.YTPlayer
  • videoURL — посилання на відео
  • containment — селектор CSS, в якому потрібно відтворити відео
  • autoPlay — авто-відтворення відео
  • mute — наявність звуку
  • startAt — час, з якого потрібно почати відтворення відео
  • opacity — прозорість відео
CSS
Додамо стилі до нашого сайту. Насамперед визначимо зовнішній вигляд html, body, тегів параграфів і маркірованого списку.

html {
height:100%
}

body {
font:15px/23px 'Raleway',sans-serif;
margin:0;
padding:0;
height:100%;
width:100%;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%
}

p {
font-size:20px;
line-height:140%;
text-align:center
}

ul li {
display:inline-block;
list-style:none;
padding-right: 10px;
}


Далі додамо стиль до wrapper, pattern, divider і colorize.

.wrapper {
z-index:600;
position:relative
}

.pattern {
background-image:url(../images/pattern.png);
background-repeat: repeat;
background-attachment:scroll;
width:100%;
height:100%;
position:absolute;
top:0;
left:0
}

.divider {
background-image:url(../images/divider.png);
display:block;
width:300px;
height:35px;
margin:10px auto
}

#colorize {
color:#f1c40f;
font-family:'Lato',sans-serif;
font-size:40px
}


Настав час стилів секції big-background. Встановимо z-index 550 параметр overflow на hidden. Це необхідно для того, щоб контент YouTube (субтитри, анотації) не відображалися на нашому сайті. Інші стилі потрібні для заголовків, кнопок і зображення за замовчуванням (про це трохи пізніше).

.big-background {
z-index:550;
text-align:center;
height:100%;
min-height:100%;
position:relative;
overflow:hidden
}

.big-background .big-background-container {
width:830px;
max-width:100%;
display:inline-block;
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
transform:translate(-50%,-50%)
}

.big-background-title {
font-family:'Raleway',sans-serif;
font-size:78px;
color:#fff;
font-weight:300;
text-transform:uppercase;
text-align:center;
margin-bottom:22px;
padding-top:20px;
display:inline-block;
background-attachment:scroll;
background-repeat:repeat-x;
background-position:top center
}

a.big-background-btn {
font-family:'Lato',sans-serif;
font-size:13px;
text-transform:uppercase;
text-decoration:none;
color:#fff;
background:transparent;
border:2px solid #fff;
padding:10px 14px;
cursor:pointer;
letter-spacing:2px;
text-align:center;
display:inline-block;
-webkit-transition:.4s background ease;
-moz-transition:.4s background ease;
-o-transition:.4s background ease;
transition:.4s background ease;
}

.big-background-btn:hover {
color:#fff;
background:rgba(255,255,255,0.20)
}

.big-background-default-image {
background:url(../images/sunset.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100%;
height:100%;
z-index:0;
backface-visibility:hidden
}


Тепер перейдемо до секції about-section. Налаштуємо параметр background-color white padding на 60px зверху і знизу і 20px ліворуч і праворуч.

.about-section {
font-family:'Lato',sans-serif;
color:#7f8c8d;
background:#fff;
padding:60px 20px
}

.about-section-container {
text-align:center;
padding-bottom:50px
}

.about-section-title {
font-family:'Raleway',sans-serif;
font-size:40px;
background:#fff;
color:#3d566e;
padding:0 35px;
margin-bottom:22px;
background-attachment:scroll;
background-repeat:repeat-x;
background-position:center center;
text-transform:uppercase
}

a.about-section-btn {
font-family:'Lato',sans-serif;
font-size:13px;
text-transform:uppercase;
text-decoration:none;
color:#34495e;
background:transparent;
border:2px solid #34495e;
padding:10px 14px;
cursor:pointer;
letter-spacing:2px;
text-align:center;
display:inline-block;
-webkit-transition:.4s background ease;
-moz-transition:.4s background ease;
-o-transition:.4s background ease;
transition:.4s background ease;
}

.about-section-btn:hover {
color:#fff;
background: #34495e;
}


Для секції small-background-section, яка також служить підвалом, ми призначимо ширину 100% і параметр overflow на hidden. Ми також додамо трохи padding зверху і знизу для того, щоб було видно наше відео. І нарешті додамо стилі для кнопок соціальних мереж.

.small-background-section {
font-family:'Raleway',sans-serif;
padding:100px 0;
position:relative;
width:100%;
overflow:hidden
}

.small-background-container {
position:relative;
text-align:center
}

.small-background-title {
font-size:40px;
color:#f1c40f;
font-weight:300;
z-index:10;
display:inline-block;
text-transform:uppercase;
margin-bottom:20px;
margin-top: 20px;
position:relative;
background-attachment:scroll;
background-repeat:repeat-x;
background-position:top center
}

.socials a {
color:#fff
}

.socials a:hover {
color:#bdc3c7
}


Media queries
Для того, щоб наш сайт був адаптивним, додамо трохи media queries.

@media screen and (max-width: 768px) {
.about-section-title {
line-height:1
}
}

@media screen and (max-width: 480px) {
.big-background-title {
font-size:58px
}

.small-background-title {
line-height:1
}

/*.player{ display: none;} -> If you want to remove the video bg on a specific viewport w/o plugin*/
}

@media screen and (max-width: 360px) {
.big-background-title#colorize {
line-height:1
}
}

@media screen and (max-width: 320px) {
.small-background-title {
font-size:30px
}
}


jQuery
Тепер включимо наше YouTube відео. Викличемо клас player всередині коду jQuery. Помістіть наступний код закривається перед тегом body і всередину тегів <script> </script>.
$(function(){
$(".player").mb_YTPlayer();
});


Запасний варіант
Фонове відео з YouTube не буде відтворюватися на мобільних пристроях і планшетах, так як правила YouTube цього не дозволяють.

Однак, ми можемо використовувати jQuery для того, щоб додати фонове зображення за замовчуванням, у разі якщо браузер визначить, що користувач зайшов на сайт з мобільного пристрою.

Ручне рішення

Щоб визначити, що користувач зайшов з мобільного пристрою або планшета, ми можемо сховати елемент на певному розмірі екрану. Наприклад, ми хочемо прибрати відео-фон на екранах шириною 480px. Потрібно просто додати display: none до елемента player:

@media screen and (max-width: 480px) {
.player{ display: none; }
}


Що стосується jQuery, тут ми встановимо змінну is_mobile з параметром false. Потім переконаємося, що клас player має параметрм display: none. Якщо це так, то додамо клас big-background-default-image до секцій big-background і small-background-section для використання фонового зображення за замовчуванням. У зворотному випадку нічого не зміниться.

(function($) {
$(document).ready(function() {
var is_mobile = false;

if( $('.player').css('display')=='none') {
is_mobile = true;
}
if (is_mobile == true) {
//Conditional script here
$('.big-background, .small-background-section').addClass('big-background-default-image');
}else{
$(".player").mb_YTPlayer();
}
});
})(jQuery);


Рішення з допомогою плагіна jQuery
Інший спосіб установки зображення за замовчуванням здійснюється з допомогою jQuery плагін device.js (http://matthewhudson.me/projects/device.js/). Це спростить процес опису умов під різні розміри екранів мобільних пристроїв. Використовуючи цей модуль, ми можемо просто прописати наступний код:

(function($) {
$(document).ready(function() {
//Device.js will check if it is Tablet or Mobile - http://matthewhudson.me/projects/device.js/
if (!device.tablet() && !device.mobile()) {
$(".player").mb_YTPlayer();
} else {
//jQuery will add the default background to the preferred class
$('.big-background, .small-background-section').addClass(
'big-background-default-image');
}
});
})(jQuery);


Тут я використав методи device.mobile() і device.tablet() для перевірки пристрою, з якого зайшов користувач. Якщо умова виконується, що додається клас big-background-default-image до секціїbig-background і small-background-section. В іншому випадку клас player залишиться незмінним і відео буде відтворюватися.

Наводимо в порядок
Відео — це чудовий спосіб донести повідомлення аудиторії. Воно може стати потужним інструментом вашого сайту з урахуванням правильного використання.

Я впевнений, що по мірі розвитку і вдосконалення веб-дизайну, з'являться все більше і більше креативних ідей застосування відео в дизайні веб-сайту. Я сподіваюся, ви научиль дечого в цьому туториале. Пишіть в коментарях ваші думки і зауваження.

Від перекладача. З усіма побажаннями та зауваженнями щодо перекладу прошу звертатися до мене в лічку. Спасибі!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.