class player — этот класс используется плагином mb.YTPlayer videoURL — ссылка на видео containment — селектор CSS, в котором нужно воспроизвести видео autoPlay — авто-воспроизведение видео mute — наличие звука startAt — время, с которого нужно начать воспроизведение видео opacity — прозрачность видео CSS Добавим стили к нашему сайту. Прежде всего определим внешний вид html, body, тегов параграфов и маркированного списка. html { height:100% }

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

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

ul li { display: inline-block; list-style: none; padding-right: 10 px; } Далее добавим стиль к 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:300 px; height:35 px; margin:10 px auto }

#colorize { color:#f1c40f; font-family:'Lato', sans-serif; font-size:40 px } Настало время стилей секции 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:830 px; 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:78 px; color:#fff; font-weight:300; text-transform: uppercase; text-align: center; margin-bottom:22 px; padding-top:20 px; 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:13 px; text-transform: uppercase; text-decoration: none; color:#fff; background: transparent; border:2 px solid #fff; padding:10 px 14 px; cursor: pointer; letter-spacing:2 px; 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 на 60 px сверху и снизу и 20 px слева и справа.

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

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

.about-section-title { font-family:'Raleway', sans-serif; font-size:40 px; background:#fff; color:#3d566e; padding:0 35 px; margin-bottom:22 px; 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:13 px; text-transform: uppercase; text-decoration: none; color:#34495e; background: transparent; border:2 px solid #34495e; padding:10 px 14 px; cursor: pointer; letter-spacing:2 px; 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:100 px 0; position: relative; width:100%; overflow: hidden }

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

.small-background-title { font-size:40 px; color:#f1c40f; font-weight:300; z-index:10; display: inline-block; text-transform: uppercase; margin-bottom:20 px; margin-top: 20 px; 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: 768 px) { .about-section-title { line-height:1 } }

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

.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: 360 px) { .big-background-title,#colorize { line-height:1 } }

@media screen and (max-width: 320 px) { .small-background-title { font-size:30 px } } jQuery Теперь включим наше YouTube видео. Вызовем класс player внутри кода jQuery. Поместите следующий код перед закрывающимся тегом body и внутрь тегов . $(function (){ $(».player»).mb_YTPlayer (); }); Запасной вариант Фоновое видео с YouTube не будет воспроизводиться на мобильных устройствах и планшетах, так как правила YouTube этого не позволяют.Однако, мы можем использовать jQuery для того, чтобы добавить фоновое изображение по умолчанию, в случае если браузер определит, что пользователь зашел на сайт с мобильного устройства.

Ручное решение

Чтобы определить, что пользователь зашел с мобильного устройства или планшета, мы можем спрятать элемент на определенном размере экрана. Например, мы хотим убрать видео-фон на экранах шириной 480 px. Нужно просто добавить display: none к элементу player:

@media screen and (max-width: 480 px) { .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 останется неизменным и видео будет воспроизводиться.

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

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

© Habrahabr.ru