![](https://habrastorage.org/storage2/d34/ebd/441/d34ebd441d9e9a158ceffbb631772339.jpg)
Плагин BigVideo.js для jQuery добавляет на страницу видео в качестве фонового изображения через HTML5 Fullscreen API. Видео автоматически растягивается на любой размер экрана. Для работы нужно предварительно загрузить библиотеки jQuery, jQuery UI и jQuery imagesloaded. Запуск:
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});
В качестве хостинга своих видеороликов удобно использовать Vimeo Pro, он даёт прямую ссылку на mp4-файл и отгружает контент со скоростью более 10 Мбит/с.
Можно запустить список из нескольких видеороликов в бесконечном цикле, как в этом примере. Конечно, нужно добавить кнопку, чтобы пользователь мог отключить воспроизведение видео.
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});
Поскольку на мобильных устройствах автоматическое воспроизведение видео запрещено, с помощью такого кода можно их распознавать и заменять фоновое видео на статическое фоновое изображение:
var BV = new $.BigVideo();
BV.init();
if (Modernizr.touch) {
BV.show('video-poster.jpg');
} else {
BV.show('video.mp4',{ambient:true});
}
Есть поддержка плейлистов с выбором в меню, какой видеоролик запустить.
Коллекции бесплатных видеороликов, подходящих для фона.