Как поставить видео на фон сайта

Всем привет.

В этом уроке Я расскажу о том, как сделать видео фон для Вашего сайта, добавить поверх него какую-то текстуру и написать текст. А так же расскажу как растянуть фон на всю ширину страницы и зафиксировать при прокрутке.

Шаг 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. Добавление текста и текстуры над видео

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