На этом уроке научимся устанавливать на сайт видео фон во всю ширину экрана. Обычно такие видео фоны служат вместо статичного фона в верхней секции сайта. Это хорошо работает на промо-страницах, где видео - интерактивное средство пиара товара или услуги.
На этом уроке научимся устанавливать на сайт видео фон во всю ширину экрана. Обычно такие видео фоны служат вместо статичного фона в верхней секции сайта. Это хорошо работает на промо-страницах, где видео - интерактивное средство пиара товара или услуги.
Откуда взять качественное, короткое и желательно бесплатное видео? Сегодня познакомимся с замечательным ресурсом http://www.coverr.co, откуда можно скачать бесплатно, тематические видео-ролики для дальнейшей вставки на сайт, видео файлы уже специально подготовлены в нужных форматах, которые понимают все браузеры. Скачайте архив и поместите папку video в ваш существующий проект или в новую разработку. Я выбрал видео-ролик с названием - amalfi.
Демо пример
Как установить видео фон на сайт
Первым делом надо скачать jQuery плагин vide.js с сайта: http://vodkabears.github.io/vide/, из папки dist перетащить файл jquery.vide.min в папку js своего проекта.
HTML код
Создадим собственный HTML файл с одной секцией, внутри которой заголовок и один абзац, этот контент не играет никакой роли, это значит, что в теге section может быть любое содержание. В нашем случае имеет значение сама секция, как контейнер для видео фона и дата-атрибут data-vide-bg, который берёт видео под названием amalfi из папки video и загружает его на сайт.
<section data-vide-bg="video/amalfi">
<h2>Отдых в Амальфи</h2>
<p>приморский город в итальянской провинции Салерно.</p>
</section>
В вашем проекте должно быть четыре файла, названия первых двух могут быть любые и вы создаёте их сами. Последние два файла надо скачать, их мы вообще не трогаем, а только подключаем к HTML странице:
- index.html - страница с видео фоном
- style.css - CSS стили
- jquery.min.js - библиотека jQuery
- jquery.vide.min.js - плагин видео фона
Подключение CSS и JS
/* подключить в хедере */
<link rel="stylesheet" href="css/style.css">
/* подключить перед закрывающимся тегом body */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.vide.min.js"></script>
Библиотеку jquery.min.js мы не стали скачивать, а воспользовались альтернативой - прописали ссылку, откуда она будет подгружаться.
CSS код
Видео уже будет загружаться в виде фона, но для красоты без стилей никак не обойтись. Все поля и отступы мы обнулили, иначе сверху вы увидите белую полосу и поставили высоту секции - 100vh, этот значение обеспечивает адаптивность. Остальные свойства - чисто оформление.
* {
margin: 0;
padding: 0;
}
section {
color: white;
font-family: "Source Sans Pro", sans-serif;
height: 100vh;
}
h2 {
font-size: 2.5em;
padding-top: 5%;
padding-left: 5%;
font-weight: 900;
text-transform: uppercase;
}
p {
font-weight: 400;
font-size: 1.2em;
padding-left: 2%;
}
Мобильные устройства
На разрешении экрана менее 768 пикселей, видео не будет загружаться, а вместо него загрузим картинку. Скорость мобильного интернета медленнее, поэтому добавим следующий код в наш файл стилей.
/* вставить картинку вместо видео фона */
@media (max-width: 767px) {
section {
background-image: url("../video/amalfi.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/* выключить видео фон */
[data-vide-options]{
muted: true;
}}
Полезный совет
Для размещения изображений на видео фоне, используйте абсолютное позиционирование и свойство z-index.
