Подключаем библиотеку jQuery и плагин jquery.vide.js и просто добавляем атрибут data-vide-bg="path/video" к нужному блоку.
Где: path - папка с файлами video.jpg, video.mp4, video.ogv и video.webm
Пример:
|
1 2 3 4 5 |
<div data-vide-bg="/demo/vide/video"> <div style="padding:200px 10px; font-size:30px; text-align:center; color: #BFE2FF"> Адаптивное видео для фона </div> </div> |
Адаптивное видео для фона
Также можно использовать атрибут 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: ' ' | класс для блока с видео |
Пример:
|
1 2 3 4 5 |
<div data-vide-bg="/demo/vide/video" data-vide-options="playbackRate: 0.1, position: '0 100%'"> <div style="padding:200px 10px; font-size:30px; text-align:center; color: #BFE2FF"> Адаптивное видео для фона </div> </div> |
Адаптивное видео для фона
Для того чтобы сделать видеофон на весь экран, нужно прописать атрибут data-vide-bg к тегу body и задать ему 100% высоту и ширину:
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <html> <title>Адаптивный видеофон во весь экран / Atuin</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="http://atuin.ru/demo/vide/jquery.vide.js"></script> <style> html, body{ height:100%; width:100%; margin:0; display:table; } div { font-size:42px; text-align:center; vertical-align:middle; font-family:verdana; color:#BFE2FF; display:table-cell; } </style> <body data-vide-bg="/demo/vide/video"> <div>Адаптивный видеофон во весь экран</div> </body> </html> |
Не работает в safari. Как сделать понятия не имею, уже попробовал 3 способа докрутки!
Это старое решение, сейчас проще все сделать на html5 видео.
мда, пришлось поковыряться прежде чем сделал, вы так и говорите что видео должно называться video.mp4
Так у меня так и написано 🙂
Не работает на Айфонах. Есть ли метод, в котором при адаптации скрипт переставал работать и вместо видео вставала картинка?
"При адаптации" - это на малых экранах или при изменении размера экрана?
Как вариант, можно вообще скрыть этот блок на малые экраны, и показать просто какой то текст.
Очень круто, а подскажите как сделать чтобы большое количество данных видео не грузило сайт, вот ниже представлено видео по применению выше изложенного:
- когда 2 слайда: https://share.vidyard.com/watch/kjGARbt2NE7p6MQroqMNt5
- когда 6 слайдов: https://share.vidyard.com/watch/zY88kkCTYsVLYANUFJ6PZs?disable_analytics=1
А шесть видеофонов не перебор ли?
Если необходимо показать именно видео, то ИМХО лучше ставить простой плеер - переключился слайд, там текст и видео, человек тыкает плей и смотрит.
А это просто фон, какие нибудь тучки и т.д.
Тут разумнее сделать фон, а на нем листать слайды (не меняя фон)
Александр, можно как нибудь вам в личку скинуть проект чтобы вы как профессионал оценили, что лучше здесь использовать. Просто пока проект сырой не хочу на публику показывать. Вот ссылка моя в контакте https://vk.com/ghostbz85
Классный способ!
И никаких заморочек с ксс и жавой.