Как установить видео на заднем фоне сайта? На этот вопрос можно найти массу конкретных решений, а сегодня я расскажу про плагин videoBG, при помощи которого мы справимся с этой задачей в два счета. Для этого варианта нам понадобиться: сам плагин и небольшой отрезок видео (к примеру, если у вас сайт-визитка или лэндинг турагентства, то красивые волны на заднем фоне будут привлекать пользователя и ненавязчиво задерживать на ресурсе).
VideoBG – это одно из решений, которое поможет нам добавить видео на задний фон. Внимание, мы будем использовать HTML5. К слову, в одной из ранних статьей я описывал ещё один интересный скрипт под названием vide. Он позволяет добавить видео и, в принципе, ни чем не хуже этого варианта.
Для начала работы с videoBG подключаем jQuery библиотеку и сам плагин:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.videoBG.js" type="text/javascript"></script>
HTML разметку по умолчанию добавлять не нужно, но, если вам потребуется добавить видео в фоне какого-то элемента, то просто применяем плагин videoBG относительно нужного тега. Давайте теперь воспользуемся плагином относительно элемента body:
$(function(){
$("body").videoBG({
position: "fixed",
zIndex: 0,
mp4: "christmasSnow.mp4",
ogv: "christmasSnow.ogv",
webm: "christmasSnow.webm",
poster: "christmasSnow.jpg",
opacity: 1,
fullscreen: true
});
});
У плагина есть свои настройки - некоторые, из которых обязательны для корректной работы videoBG! Ниже мы рассмотрим их:
- mp4 – путь до mp4 файла (обязателен);
- ogv – путь до ogv файла (обязателен);
- webm – путь до webm файла (обязателен);
- poster – путь до картинки, она нужна если не один из вышеперечисленных форматов не поддерживается браузером (обязателен);
- autoplay – автовоспроизведение видео (true | false);
- loop – цикл воспроизведения указывается число раз, если нужно прокручивать видео бесконечно, то указываем true;
- sclae – отвечает за давления z-index к блоку с видео, если перевести в true то плагин сам будет изменять данное свойство, чтобы быть ниже остальных блоков;
- position – отвечает за свойство позиционирования;
- opacity – прозрачность видео;
- fullscreen – при указание true видео будет растянуто на всю ширину и высоту встраимого блока;
- zIndex – отвечает за свойство позиционирования z-index;
- width – ширина видео;
- height – высота видео.
Подводя итоги разбора решения videoBG хочется отметить: данный скрипт малого размера и обладает хорошей поддержкой браузеров. Настройка и установка проста и понятна, так что берём на заметку и используем для добавления видео задним фоном на сайт.