Адаптивное видео в качестве фона блока
Во многих разрабатываемых корпоративных проектах необходимо на страницу сайта выводить видео в качестве фона блока. Для этого мы можем использовать плагин jQuery jquery.vide.js. Для его работы не требуется никаких дополнительных css и html кодов, структура блока выглядит таким образом:
Подключаем библиотеки:
data-vide-bg - папка с файлами video.jpg, video.mp4, video.ogv и video.webm
Адаптивное фоновое видео на jQuery
Также jquery.vide имеет атрибут data-vide-options для настроек видео
| volume: 1 | громкость (от 0 до 1) |
| playbackRate: 1 | скорость видео (медленнее < 1 > быстрее) |
| muted: true | отключение звука (true, false) |
| loop: true | повтор (true, false) |
| autoplay: true | автопроизведение (true, false) |
| position: '50% 50%' | позиционирование видео, также как background-position для CSS |
| posterType: 'detect' | Тип постера ("detect" — автоматически; "none" — без постера; "jpg", "png", "gif",... - точное расширение. |
| resizing: true | масштабирование видео под размеры блока (true, false) |
| bgColor: 'transparent' | цвет для фона блока с видео |
| className: ' ' | класс для блока с видео |
348
раз уже помогла
