Уже не для всех секрет и новость, что все чаще и чаще появляются посадочные страницы с привлекающим дизайном и обилием функциональности. Так вот хочу рассказать, что внедрение фонового видео для сайта уже пользуется большим спросом, чем те же сайты, которые сделаны, например, со слайдером. Так как интернет-провайдер позволяет потреблять за копейки достаточно приличный на мой взгляд трафик, почему бы не воспользоваться подобной идеей и не встроить себе фоновое видео, которое сможет привлечь спрос клиентов на услуги.
Речь пойдет об одном плагине, написанным одним талантливым разработчиком Matteo Bicocchi, - JQuery Youtube Player. Для ознакомления, в источниках материала, я указал ссылку на GitHub где собственно и находится данный плагин и другие плагины этого разработчика. Главное ознакомитесь с демо версией и обязательно с документацией, которую я конечно подготовил для Вас собственно специально, но может чего то не опишу полноценно.
Подключаем файл стилей demo.css и файл стилей самого плагина jquery.mb.YTPlayer.min.css, библиотеку JQuery и самого скрипта библиотеку jquery.mb.YTPlayer.min.js, а также не забываем про сам скрипт video.js.
<link type="text/css" rel="stylesheet" href="css/demo.css"> <link type="text/css" rel="stylesheet" href="css/jquery.mb.YTPlayer.min.css" media="all"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script> <script src="js/jquery.mb.YTPlayer.min.js"></script> <script src="js/video.js"></script>
После этого можем смело приступать к макету HTML. Особо не придирайтесь к дизайну, я думаю он Вам по любому будет не нужен, так как главное рассмотреть данный плагин и правильно его внедрить в свой сайт. Поэтому я руководствовался простой формулировкой - "больше нужного, меньше не нужного".
И так, первое с чего начнем, так это со вставки пожалуй видео на сайт. Делается это все в div блоке, которому мы присваиваем идентификатор video и задаем специальный атрибут data-property, который содержит специальные свойства для расширения видео. О свойствах поговорим в третьем шаге - > документация.
<div id="video" data-property="{
videoURL:'3McNFrqJMZw',
containment:'#customElement',
showControls:false,
mute:true,
startAt:0,
opacity:1,
addRaster:true,
quality:'default',
stopMovieOnBlur:false
}">
</div>
Если мы вставим просто фоновое видео, это будет смотреться не актуально, ведь нам нужно использовать подобный функционал для привлечения клиентов и вызывать интерес, именно такими свойства и возможностями в дизайне мы сможем получить спрос и отклик на наши услуги. Поэтому на видео, мы можем наложить любую информацию или создать блок, который будет служить каркасом для макета. Для этого создаем div блок с идентификатором customElement и придаем ему необходимые для нас свойства (это уже Вы сами все пропишите, что Вам потребуется).
<div id="customElement"> <div class="content"> <h1>Разработка и продвижение сайтов</h1> <div></div> <p>Студия Дизайна LikeWeb.me</p> <a href="http://likeweb.me" target="_blank"> <img class="logo" src="images/logo.png" widht="438" height="405"/> </a> </div> </div>
Также после видео или до него, мы можем создать отдельный блок и разместить там любую информацию. Весь код HTML приведен чуть ниже...
<div id="customElement">
<div class="content">
<h1>Разработка и продвижение сайтов</h1>
<div></div>
<p>Студия Дизайна LikeWeb.me</p>
<a href="http://likeweb.me" target="_blank">
<img class="logo" src="images/logo.png" widht="438" height="405"/>
</a>
</div>
</div>
<div id="video" data-property="{
videoURL:'3McNFrqJMZw',
containment:'#customElement',
showControls:false,
mute:true,
startAt:0,
opacity:1,
addRaster:true,
quality:'default',
stopMovieOnBlur:false
}">
</div>
<div class="content2">
<h2>Наши тарифы услуг на разработку сайтов</h2>
<div class="services">
<span>Сайт-визитка</span> / <span>Сайт компании</span> /
<span>Интернет-магазин</span> / <span>Landing-Page</span>
</div>
</div>
Переходим к более простому шагу и создаем файл стилей demo.css, в котором для нашего примера будут служить подобные свойства и стили.
.content{
background: #ffffff;
width: 960px;
height: 700px;
opacity: 0.7;
margin: 0 auto;
padding: 20px;
}
.content2{
width: 960px;
margin: 20px auto;
padding: 20px;
}
.content p{
text-align: center;
font-size: 30px;
}
.content div{
margin: 10px auto;
width: 400px;
border: 1px solid #000000;
}
.logo{
margin-left: 260px;
margin-top: 50px;
}
.services{
text-align: center;
font-size: 20px;
margin-top: 30px;
}
h1,h2{
text-align: center;
opacity: 1;
}
И самое пожалуй важное тут, добавить стили, которые будут адаптировать наше видео под разрешение экрана устройства.
#customElement {
width: 100%;
height: 700px;
background: rgba(81, 150, 191, 0.60);
position: relative;
top: 0;
left: 0;
z-index: 0;
background: url("../images/ytplayer_img.jpg") no-repeat center center;
background-size: cover;
}
Как мы можем тут заметить, что все-таки видео грузиться не так быстро, как сами картинки, поэтому чтобы убрать белый фон вначале загрузки сайта, стоит приготовить и подогнать, определенную по дизайну картинку, которая будет служить начальным приветствием.
Для нашего примера, я взял картинку из ролика данного сайта LikeWeb.me - Студии дизайна по разработке и продвижению сайтов.
Ну что ж, заключительный шаг, который нам предстоит сделать, так это описать скрипт video.js и немного разобраться в документации и настройке плагина фонового видео для сайта Youtube Player.
На самом деле, код очень простой и пожалуй не требует особых объяснений по сравнению с документацией. В принципе, мы вызываем функцию JQuery с идентификатором video, который взаимосвязан с самим HTML блоком div.
jQuery(function () {
jQuery("#video").YTPlayer();
});
Переходим к документации. Все подробно я описывать не буду, это Вы уже прочитайте на GitHub, а разберем только то, что действительно, нужно и потребуется.
| Свойство | Значение | Описание |
|---|---|---|
| videoURL | 3McNFrqJMZw |
Позволяет вставлять видео ролик с Youtube 3-мя удобными для Вас способами:
|
| containment | #customElement | Позволяет вставлять сам блок на видео, на котором можно размещать информацию |
| showControls | true, false | Позволяет скрывать и показывать панель управления видео роликом (стоп, пауза, перемотка, длительность и т.д.). По умолчанию стоит включенным - true |
| mute | true, false | Позволяет включать и отключать звук видео ролика. По умолчанию стоит включенным - true |
| startAt | 0 | Позволяет включать видео ролик с любой секунды |
| opacity | 1 | Позволяет задавать прозрачность видео ролику |
| addRaster | true, false | Позволяет показывать и убирать картинку вначале загрузки видео ролика. По умолчанию стоит выключенным - false |
| quality | default | Позволяет задавать качество видео ролика. Стоит по умолчанию - default |
| stopMovieOnBlur | true, false | Позволяет при наведении на другой объект, останавливать видео ролик, при обратном наведении на ролик продолжать его демонстрацию |
| autoPlay | true, false | Позволяет автоматически запускать видео ролик при загрузка сайта. По умолчанию стоит включенным - true |
| showYTLogo | true, false | Позволяет показывать прямую ссылку на оригинальное видео, расположенное на Youtube. По умолчанию стоит включенным - true |
Как бы на этом пожалуй все, был рад поделиться полученными знаниями с Вами. Надеюсь, данный плагин поможет вдохновить и увеличить рост спроса трафика на Ваш сайт!