Создаем адаптивную Landing Page c видео фоном

В последнее время все больше набирают популярность страницы ландинг пейдж с видео в качестве фона.

В этой заметке я покажу как это можно сделать.

С начала посмотрим на несколько примеров таких страниц:

http://4dasoul.com/

Пример Landing Page c видео фоном - 1

https://5minutemarketing.leadpages.net/experience/

Пример Landing Page c видео фоном - 2

http://christianmickelsen.com/webinar/

Пример Landing Page c видео фоном - 3

А теперь, что должно у нас получиться.

Пример — 1

Создаем адаптивную Landing Page c видео фоном - плагин jquery.mb.YTPlayer

Пример-2

Создаем адаптивную Landing Page c видео фоном - плагин jQuery tubular plugin

Рассмотрим как это сделать.

За основу я возьму код из заметки "Создаем адаптивную Landing Page (целевую страницу) — продолжение"

Вот эту страницу

В самом начале нам нужно удалить в CSS свойствах страницы параметр background.

Удаляем строку кода:

background: url(img/tropical_paradise.jpg) no-repeat center center fixed;

И далее весь код между операторами <style> и </style> вставляем в новый файл style-3.css и сохраняем его в папку CSS.

А из исходного файла его удаляем, а в место этого пишем строку для подключения

<link rel="stylesheet" href="css/style-3.css" />

Для реализации фона с виде я буду использовать специальный плагин для JavaScript библиотеки jQuery и видео хостинг YouTube.

Я рассмотрю два плагина, а какой лучше решайте сами.

Первый плагин — jquery.mb.YTPlayer и его сайт

На сайте Вы можете также посмотреть пример использования плагина.

Вы можете проигрывать одно видео или несколько видео из плейлиста.

Использовать его очень просто.

Вы скачиваете архив с плагином и разархивируете его в папку, например js.

Затем в html-файле подключаете сам плагин — файл jquery.mb.YTPlayer.js и набор стилей для него css/YTPlayer.css.

Кроме того, необходимо подключить саму библиотеку jQuery.

У меня в примере за это отвечают следующие строки:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mb.YTPlayer.js"></script>
<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">

Далее добавляем код для вызова скрипта:

<script>
 
jQuery(function(){
     jQuery(".player").mb_YTPlayer();
});
 
</script>

А в раздел <body> следующий код:

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

Давайте рассмотрим какие здесь параметры нам нужно знать.

Самое первое это класс который прописывается при вызове скрипта class="player".

Если у Вас будет другое название, необходимо его изменить в строке jQuery(".player").mb_YTPlayer();

Параметр videoURL — содержит url-адрес видео на YouTube, которое будет использоваться в качестве фона.

Параметр containment задает элемент в котором будет воспроизводиться видео, у нас это body.

Следующий параметр autoPlay задает возможность авто воспроизведения видео, если он равен true — видео начинает автоматически воспроизводится при загрузке страницы.

Если false — воспроизведение нужно запускать в ручную.

Еще один параметр mute отвечает за воспроизведение звука из видео.

Если он равен true, звука нет, а если false — есть.

Параметр startAt задает время начала воспроизведения в секундах, если он равен 0, то видео воспроизводиться с самого начала.

Если Вы хотите, чтобы видео начинало воспроизводиться с 20 секунды, пишите startAt:20.

Параметр opacity задает степень непрозрачности видео, принимает значение от 0 до 1.

0 — полностью прозрачное, 1 — непрозрачное.

Есть еще один параметр, но в своем примере я его не использую.

Он задает соотношение сторон видео — ratio.

Например, можно задать соотношение 16:9 — ratio:16/9.

Если подвести курсор мыши в низ экрана, то появится панель с элементами управления видео.

Панель с элементами управления видео

Второй плагин — это jQuery tubular plugin, его сайт

Здесь все еще проще, чем в первом случае.

Скачиваем архив с плагином, разархивируем и подключаем.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>

В файле index.js находится javascript код вызова плагина с параметрами.

Вот он:

$('document').ready(function() {
	var options = { videoId: 'e4Is32W-ppk', start: 1 };
	$('#wrapper').tubular(options);
});

Здесь у нас используются три параметра:

— videoId — Id видео на YouTube, которое будет использоваться в качестве фона (ссылка на видео имеет вид http://www.youtube.com/watch?v=z8kErQoDWp8, значение параметра v и есть Id видео);
— start — время начала воспроизведения видео в секундах;
— wrapper — ID — контейнера для воспроизведения видео.

Существуют еще параметры, имеющие следующие значения по умолчанию:

ratio: 16/9 // usually either 4/3 or 16/9 — формат соотношения сторон видео;
mute: true — воспроизведение звука из видео;
repeat: true — повторять воспроизведение видео с начала;
width: $(window).width() — ширина окна с видео, нет необходимости переопределять;
wrapperZIndex: 99 — значение CSS свойства z-index контейнера с видео;
playButtonClass: ‘tubular-play’ — класс для кнопки воспроизведения;
pauseButtonClass: ‘tubular-pause’ — класс для кнопки пауза;
muteButtonClass: ‘tubular-mute’ — класс для кнопки отключить звук;
volumeUpClass: ‘tubular-volume-up’ — класс для кнопки увеличить громкость;
volumeDownClass: ‘tubular-volume-down’ — класс для кнопки уменьшить громкость;
increaseVolumeBy: 10 увеличение громкости от 1-100;
start: 0 — начало воспроизведения в секундах

В эти страницы Вы легко можете добавить форму подписки от любого сервиса рассылок.

Покажу на примере сервиса JustClick.

Создаем код формы для Вашей группы:

<div class="jc_subblock_0 jc_subblocktexture_0" id="subscr-block-8627">
<form action="http://shop.sitebiznes.ru/subscribe/process/?rid[0]=youtubegenerator&doneurl2=http%3A%2F%2F0" method="post" target="_blank" id="subscr-form-8627" onsubmit="return jc_chkscrfrm(this, false, false, false, false)"><style type="text/css">@import url('http://shop.sitebiznes.ru/media/css/page_ext.css');</style>
<style type="text/css">#subscr-block-8627 {
	width:290px;
	margin:0 auto;
	padding:25px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
#subscr-form-8627 td {
	font:normal 16px Arial,Helvetica,sans-serif;
	text-align:center;
	padding:0;
}
#subscr-form-8627 input.form-submit {
	text-align:center;
	width: auto;
}
#subscr-form-8627 #form-submit-8627 {
	border:solid 1px #E0E0E0;margin-top:5px;
}
#subscr-form-8627 a.jc_compile_btn, input.form-submit.jc_compile_btn {
	border:solid 1px #E0E0E0;margin-top:5px;
}
#subscr-form-8627 a.jc_compile_btn span, #subscr-form-8627 input.form-submit.jc_compile_btn {
	font:normal 20px Arial;
	padding-top:7px;
	margin-bottom:-5px;
}
#subscr-form-8627 input[type=text] {
	color:#000;
	font-size:16px;
	text-align:left;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	border:#ccc 1px solid;
	padding:7px 10px;
	margin:5px 10px 8px;
	width:240px;
}
</style>
	<table align="center" border="0" cellspacing="0" cellpadding="3"><tbody>
		<tr>
			<td><input name="lead_name" type="text" onblur='if(this.value=="") this.value="Введите ваше имя"'  onfocus='if(this.value=="Введите ваше имя") this.value=""' value="Введите ваше имя"/></td>
		</tr>
		<tr>
			<td><input name="lead_email" type="text" onblur='if(this.value=="") this.value="Введите ваш e-mail"'  onfocus='if(this.value=="Введите ваш e-mail") this.value=""' value="Введите ваш e-mail"/></td>
		</tr>
		<tr>
			<td><input type="submit" class="form-submit jc_compile_btn small red-smooth-gradient" style="color:#fff" value="Скачать бесплатно!" /></td>
		</tr></tbody>
	</table>
<script language="JavaScript" src="http://shop.sitebiznes.ru/media/subscribe/helper2.js.php"></script>
<script language="JavaScript">jc_setfrmfld()</script>
<input name="activation" type="hidden" value="true" />
</form>
</div>

Теперь мы должны добавить его на нашу страницу.

Создаем адаптивную Landing Page c видео фоном - плагин jquery.mb.YTPlayer - форма подписки JustClick

Скачать архив с файлами.

Если Вам понравилась данная заметка, подпишитесь на получение новых материалов, через форму подписки ниже.

Читайте ранее:
Результативный e-mail маркетинг от Азамата Ушанова

В этом видео я хочу Вам представить бесплатную видео-серию из трех уроков от известного инфобизнесмена рунета Азамата Ушанова. «Как построить...

Закрыть