- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
JS Animated. Как работать с Vide — Background video
Февраль 2, 2016
Наша Команда техподдержки рада представить Вам новый туториал, который покажет, как работать с Vide — Background video в Веб-шаблонах.
JS Animated. Как работать с Vide — Background videoПлагин JQuery «Vide» используется для добавления фонового видео в Веб-шаблоны. Видео добавляется в раздел сайта как фон при помощи специального скрипта. Разные браузеры поддерживают разные форматы видео, по этому, для того чтобы обеспечить отображение видео в разных браузерах, следуйте таким инструкциям:
-
Конвертируйте ваше видео в 3 формата: *.mp4, *.ogv, *.webm. Названия файлов должны совпадать (например, video_1.mp4, video_1.ogv, video_1.webm). Вы можете ознакомиться с видео-туториалом, который покажет, как конвертировать видео-файлы.
-
Подготовьте изображение для отображения в браузерах, которые не поддерживают отображение фонового видео, а также на мобильных устройствах (например, video_1.jpg).
-
Войдите в ваш клиент FTP или откройте Файловый менеджер Панели управления хостингом, для того чтобы получить доступ к файлам сайта и загрузить видео-файлы в папку ‘video’:
-
Откройте ваш файл *.html, для того чтобы добавить новое видео на страницу. В нашем случае, нужно открыть файл index.html.
-
В соответствующем блоке с классом .vide укажите путь к ранее созданным файлам в атрибуте data-vide-bg. Не указывайте расширения файлов. Например:
<div class="vide" data-vide-bg="video/video_1"> Your content </div>
В данном примере video/video_1 — это путь к вашему видео-файлу (без расширения, которое указывает формат файла). Вы можете также изменить содержимое, как это показано ниже:
-
Сохраните изменения и загрузите файлы назад на сервер, если Вы используете FTP. Далее, обновите страницу сайта для просмотра внесённых изменений:
Вы можете также ознакомиться с детальным видео-туториалом ниже:
JS Animated. Как работать с Vide – Фоновое видео