1
Уроки Фоновое видео для сайта Youtube Player
11 сентября 2015
4239
фоновое видео для сайта, youtube player

Фоновое видео для сайта Youtube Player

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

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

 

Речь пойдет об одном плагине, написанным одним талантливым разработчиком Matteo Bicocchi, -  JQuery Youtube Player. Для ознакомления, в источниках материала, я указал ссылку на GitHub где собственно и находится данный плагин и другие плагины этого разработчика. Главное ознакомитесь с демо версией и обязательно с документацией, которую я конечно подготовил для Вас собственно специально, но может чего то не опишу полноценно.

 

Первый шаг. Подключение стилей, библиотек и скриптов. HTML заготовка.

 

Подключаем файл стилей 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>

 

 

Второй шаг. Стили CSS.

 

Переходим к более простому шагу и создаем файл стилей 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 - Студии дизайна по разработке и продвижению сайтов.

 

LikeWeb.me - Студия дизайна по разработке и продвижению сайтов

 

 

Третий шаг. Скрипт JQuery. Документация.

 

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

 

На самом деле, код очень простой и пожалуй не требует особых объяснений по сравнению с документацией. В принципе, мы вызываем функцию JQuery с идентификатором video, который взаимосвязан с самим HTML блоком div.

 

jQuery(function () {
    jQuery("#video").YTPlayer();
});

 

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

 

Свойство Значение Описание
videoURL 3McNFrqJMZw

Позволяет вставлять видео ролик с Youtube 3-мя удобными для Вас способами:

  1. Полноценной ссылкой http://www.youtube.com/watch?v=3McNFrqJMZw
  2. Сокращенной ссылкой http://youtu.be/3McNFrqJMZw
  3. Прямой ссылкой 3McNFrqJMZw
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

 

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





Роман КраутерИсточник материала »