В последнее время все больше набирают популярность страницы ландинг пейдж с видео в качестве фона.
В этой заметке я покажу как это можно сделать.
С начала посмотрим на несколько примеров таких страниц:
https://5minutemarketing.leadpages.net/experience/
http://christianmickelsen.com/webinar/
А теперь, что должно у нас получиться.
Рассмотрим как это сделать.
За основу я возьму код из заметки "Создаем адаптивную 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.
Создаем код формы для Вашей группы:
Теперь мы должны добавить его на нашу страницу.
Если Вам понравилась данная заметка, подпишитесь на получение новых материалов, через форму подписки ниже.