Создаем адаптивную 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.

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


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

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

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

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

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

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

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

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

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

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




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


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

My video

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

Самое первое это класс который прописывается при вызове скрипта 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, его сайт

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

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




В файле 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.

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

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

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

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

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

Оставьте комментарий