JS Animated. Как работать с Vide — Background video

Наша Команда техподдержки рада представить Вам новый туториал, который покажет, как работать с Vide — Background video в Веб-шаблонах.

Плагин JQuery «Vide» используется для добавления фонового видео в Веб-шаблоны. Видео добавляется в раздел сайта как фон при помощи специального скрипта. Разные браузеры поддерживают разные форматы видео, по этому, для того чтобы обеспечить отображение видео в разных браузерах, следуйте таким инструкциям:

1. Конвертируйте ваше видео в 3 формата: *.mp4, *.ogv, *.webm. Названия файлов должны совпадать (например, video_1.mp4, video_1.ogv, video_1.webm). Вы можете ознакомиться с видео-туториалом, который покажет, как конвертировать видео-файлы.

2. Подготовьте изображение для отображения в браузерах, которые не поддерживают отображение фонового видео, а также на мобильных устройствах (например, video_1.jpg).

3. Войдите в ваш клиент FTP или откройте Файловый менеджер Панели управления хостингом, для того чтобы получить доступ к файлам сайта и загрузить видео-файлы в папку ‘video’:

   

4. Откройте ваш файл *.html, для того чтобы добавить новое видео на страницу. В нашем случае, нужно открыть файл index.html.

5. В соответствующем блоке с классом .vide укажите путь к ранее созданным файлам в атрибуте data-vide-bg. Не указывайте расширения файлов. Например:

   <div class="vide" data-vide-bg="video/video_1"> Your content </div>

   В данном примере video/video_1 — это путь к вашему видео-файлу (без расширения, которое указывает формат файла). Вы можете также изменить содержимое, как это показано ниже:

   

6. Сохраните изменения и загрузите файлы назад на сервер, если Вы используете FTP. Далее, обновите страницу сайта для просмотра внесённых изменений:

   

Вы можете также ознакомиться с детальным видео-туториалом ниже: