Всем привет.
В этом уроке Я расскажу о том, как сделать видео фон для Вашего сайта, добавить поверх него какую-то текстуру и написать текст. А так же расскажу как растянуть фон на всю ширину страницы и зафиксировать при прокрутке.
Шаг 1. Конвертируем нужное видео в нужные форматы
Предположим что у Вас есть некое видео с названием move. avi (не важно какой формат). Что бы видео можно было поставить на фон его надо конвертировать в 3 формата:
Сделать это можно с помощью любого онлайн конвектора. Например video. online-convert. com .
Там Все на русском языке поэтому считаю не нужным пояснять, что надо делать. Скажу только, что блок "Дополнительные настройки" трогать не обязательно.
В итоге вы получите 3 видео файла вида:
Загрузите их в любое место на Вашем хостинге на котором расположен Ваш сайт. Это можно сделать с помощью FTP
Шаг 2. Устанавливаем видео как фон сайта
На самом деле видео фон это не фон 🙂 Это просто слой который расположен под основным содержанием страницы.
Необходимо создать блок, фоном которого будет видео. /p>
Прочитать подробнее про тег "video" можно тут
Я расскажу только про три основные опции.
- muted — отвечает за выключение/выключение звука. Если оно есть то звука не будет.
- loop="loop" — цикличность видео (просто удалите и видео не будет повторятся)
- autoplay="autoplay" — автоплей видео (просто удалите и видео не будет повторятся)
- poster="index. files/html5video/eeride. jpg" — актуально когда браузер пользователя не поддерживает видео
src=".." это адрес к Вашему видео которое Вы загрузили в первом шаге. Укажите прямую ссылку вида http:/site. ru/video/move. m4v
Откройте код главной страницы Вашего сайта (Где найти код главной страницы прочитайте в статье про подключение стилей и скриптов к сайту DLE WP ) и вставьте код
после
затем перед
вставьте
Сохраните все и посмотрите результат. Если Вы все сделали правильно то под содержанием Вашего сайта появилось видео.
Шаг 3. Добавление текста и текстуры над видео