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

Всем привет.

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

 

 

Шаг 1. Конвертируем нужное видео в нужные форматы

Предположим что у Вас есть некое видео с названием move.avi (не важно какой формат). Что бы видео можно было поставить на фон его надо конвертировать в 3 формата:

  • *.mp4
  • *.ogv
  • *.webm

Сделать это можно с помощью любого онлайн конвектора. Например video.online-convert.com.

Там Все на русском языке поэтому считаю не нужным пояснять, что надо делать. Скажу только, что блок «Дополнительные настройки» трогать не обязательно.

В итоге вы получите 3 видео файла вида:

  • move.mp4
  • move.ogv
  • move.webm

Загрузите их в любое место на Вашем хостинге на котором расположен Ваш сайт. Это можно сделать с помощью FTP

Шаг 2. Устанавливаем видео как фон сайта

На самом деле видео фон это не фон 🙂 Это просто слой который расположен под основным содержанием страницы.

1
Необходимо создать блок, фоном которого будет видео. Это выглядит вот так:

<video muted autoplay="autoplay" poster="move.jpg" style="width:100%;height:100%" title="1280" loop="loop">
<source src="move.m4v" type="video/mp4" />
<source src="move.webm" type="video/webm" />
<source src="move.ogv" type="video/ogg" />
</video>

Прочитать подробнее про тег «video» можно тут

Я расскажу только про три  основные опции.

  • muted — отвечает за выключение/выключение звука. Если оно есть то звука не будет.
  • loop=»loop» — цикличность видео (просто удалите и видео не будет повторятся)
  • autoplay=»autoplay» — автоплей видео (просто удалите и видео не будет повторятся)
  • poster=»index.files/html5video/eeride.jpg» — актуально когда браузер пользователя не поддерживает видео

src=»..» это адрес к Вашему видео которое Вы загрузили в первом шаге. Укажите прямую ссылку вида http:/site.ru/video/move.m4v

Откройте код главной страницы Вашего сайта (Где найти код главной страницы прочитайте в статье про подключение стилей и скриптов к сайту DLE WP) и вставьте код

<div class="bg_move">
<video muted autoplay="autoplay" poster="http:/site.ru/video/move.jpg" style="width:100%;height:100%" title="1280" loop="loop">
<source src="http:/site.ru/video/move.m4v" type="video/mp4" />
<source src="http:/site.ru/video/move.webm" type="video/webm" />
<source src="http:/site.ru/video/move.ogv" type="video/ogg" />
</video>
</div>
<div class="bg_move_wrapper">

после

<body>

затем перед

</body>

вставьте

</div>

И вставьте эти стили на Ваш сайт

.bg_move {
position:fixed; /*удалите строку если надо что бы видео прокручивалось вместе со страницей*/
min-width:100%; /*ширина видео*/
min-height:100%; /*высота видео*/
z-index:1;
top:0;
left:0;
}
.bg_move_wrapper {
position: relative;
z-index:2;
}

Сохраните все и посмотрите результат. Если Вы все сделали правильно то под содержанием Вашего сайта появилось видео.

Шаг 3. Добавление текста и текстуры над видео

В коде главной страницы после:

<body>

добавьте код

<div class="some_text">Супер текст</div>

и затем добавьте стили

.bg_move {
position: relative;
z-index:2;
text-align: center; /*Выравнивание текста*/
 padding-top: 50px; /*Отступ от верхнего края*/
font-size: 30px; /*размер текста*/
 padding-bottom: 50px; /*отступ от нижнего края*/
 background: url("images/img.png"); /*фон блока с текстом*/
}

Как вы наверно догадались img.png это название текстуры которая будет над видео.

На этом Все. Подписывайтесь на новые статьи и добавляйтесь в Facebook и Google+

 

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$