Адаптивное видео для фона блока

Очень удобный и простой в использовании плагин jQuery для создания адаптивного видеофона у блока. С ним не требуется нагромождения ни css ни html кодов, вся конструкция блока выглядит примерно так: <div data-vide-bg="path/video"></div>

Подключаем библиотеку jQuery и плагин jquery.vide.js и просто добавляем атрибут data-vide-bg="path/video" к нужному блоку.

Где: path - папка с файлами video.jpg, video.mp4, video.ogv и video.webm

Пример:

Адаптивное видео для фона

Также можно использовать атрибут 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: ' ' класс для блока с видео

Пример:

Адаптивное видео для фона

Для того чтобы сделать видеофон на весь экран, нужно прописать атрибут data-vide-bg к тегу body и задать ему 100% высоту и ширину:

Пример:

Выглядеть будет так

Автор скрипта: VodkaBears
Файлы и подробное описание тут

Смотрите также:

Волна из частиц на JS

Фон из бегущих волной частиц с возможностью установления их количества, размера и скорости

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Сергей:

    Не работает на Айфонах. Есть ли метод, в котором при адаптации скрипт переставал работать и вместо видео вставала картинка?

    Ответить
    • Alexander:

      "При адаптации" — это на малых экранах или при изменении размера экрана?
      Как вариант, можно вообще скрыть этот блок на малые экраны, и показать просто какой то текст.

      Ответить
  • Сергей:

    Очень круто, а подскажите как сделать чтобы большое количество данных видео не грузило сайт, вот ниже представлено видео по применению выше изложенного:
    — когда 2 слайда: https://share.vidyard.com/watch/kjGARbt2NE7p6MQroqMNt5
    — когда 6 слайдов: https://share.vidyard.com/watch/zY88kkCTYsVLYANUFJ6PZs?disable_analytics=1

    Ответить
    • Alexander:

      А шесть видеофонов не перебор ли?
      Если необходимо показать именно видео, то ИМХО лучше ставить простой плеер — переключился слайд, там текст и видео, человек тыкает плей и смотрит.
      А это просто фон, какие нибудь тучки и т.д.
      Тут разумнее сделать фон, а на нем листать слайды (не меняя фон)

      Ответить
      • Сергей:

        Александр, можно как нибудь вам в личку скинуть проект чтобы вы как профессионал оценили, что лучше здесь использовать. Просто пока проект сырой не хочу на публику показывать. Вот ссылка моя в контакте https://vk.com/ghostbz85

        Ответить
  • Andrey Zvanov:

    Классный способ!
    И никаких заморочек с ксс и жавой.

    Ответить