Сделать видеофон на сайте. Видеофон на сайт с YouTube

В данной статье мы расскажем как возможно сделать фон сайта — интерактивным. А точнее место фона будет загружаться видео.
Сделать видеофон на сайте мы опишем в двух вариантах:
1. Видео ролик будет загружен на хостинге
2. Видео ролик загружен на YouTube
Итак, начнем.

Сделать видеофон на сайте

Недавно нужно было создать простой волонтерский сайт с возможностью пожертвований для детей. В данный сайт мы решили место — обычного фона использовать видеофон.

Как сделать подобный фон.
1. Подготовка видео.
Нужно создать видео в формате mp4.
После чего конвертировать видео из mp4 в 2 формата: .webm и .ogv
Для того, что бы конвертировать видео можно использовать удобный ресурс: http://video.online-convert.com/ru/ — там все интуитивно понятно.
В итоге у вас должно быть 3 одинаковых видео в разных форматах: .mp4,.webm и .ogv
Кроме того нужно сделать — скриншот с видео или рисунок который Вы хотели бы использовать как фон на сайте (пока подгружается видео, пользователь видит данную картинку).

2. Html разметка
Сразу после тега вставляем фоновое видео на сайт.

<video id="video_background" preload="auto" autoplay="true" loop="loop" poster="ВАШ АДРЕС К ПАПКЕ С ФАЙЛОМ РИСУНКОМ/ИМЯ_ФАЙЛА.jpg" style="background: #0E0D12;opacity: 0.3;">
<source src="ВАШ АДРЕС К ПАПКЕ С ВИДЕО ФАЙЛОМ/ИМЯ_ФАЙЛА_ВИДЕО.mp4" type='video/mp4'>
<source src="ВАШ АДРЕС К ПАПКЕ С ВИДЕО ФАЙЛОМ/ИМЯ_ФАЙЛА_ВИДЕО.webm" type='video/webm'>
<source src="ВАШ АДРЕС К ПАПКЕ С ВИДЕО ФАЙЛОМ/ИМЯ_ФАЙЛА_ВИДЕО.ogg" type='video/ogg'>
</video>

style="background: #0E0D12;opacity: 0.3;" — добавили к видео-фону серую дымку и прозрачность.

Если Вам нужно добавить кнопку — Уменьшения и увеличения звука в видео — то встраиваем такой код:

<div id='buttons'>
<button id="player" onclick="document._video.volume+=0.1">Громче +</button>
<button id="player" onclick="document._video.volume-=0.1">Тише -</button>
</div>

Немного про тег <video>

Синтаксис
<video>
<source src="URL">
</video>

Атрибуты
autoplay — Видео начинает воспроизводиться автоматически после загрузки страницы.
controls — Добавляет панель управления к видеоролику.
height — Задает высоту области для воспроизведения видеоролика.
loop — Повторяет воспроизведение видео с начала после его завершения.
poster — Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload — Используется для загрузки видео вместе с загрузкой веб-страницы.
src — Указывает путь к воспроизводимому видеоролику.
width — Задает ширину области для воспроизведения видеоролика.

Закрывающий тег — Обязателен.

3.Css разметка
Что бы видео занимало всю ширину экрана и фон был неизменным на всем сайте — добавьте следующие стили:

video{
position:fixed;
z-index:-1;
min-width:100%;
min-height:100%;
overflow:hidden
}
/*стиль для кнопок звука*/
#player {
font-family: Arial;
color: #ffffff;
font-size: 13px;
padding: 5px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
border-radius: 10% 10% 10% 10%;
}
#player:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
background: -moz-linear-gradient(top, #003366, #006ad4)
}
Вот и все.

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

Скрипт tubular позволяет встраивать видео с Youtube место фона.

1. Скачиваем архив со скриптом.
Скачать скрипт tubular.1.0.js (802 downloads)
<!-- подключаем jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- подключаем плагин -->
<script type="text/javascript" charset="utf-8" src="ВАШ АДРЕС К ПАПКЕ СО СКРИПТОМ/js/jquery.tubular.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ВАШ АДРЕС К ПАПКЕ СО СКРИПТОМ/js/index.js"></script>

Что бы вставить свое видео, нужно в скрипт подставит id видео файла из ссылки на Youtube:
Открываем файл index.js:

Мы выделили стрелочкой id видео ролика, которое нужно заменить на Ваше ID ролика. Взять его можно здесь:

Важным элементом является то, что нужно заполнить видеофоном конкретную область.
В скрипте используется контейнер с id="wrapper".
<div id="wrapper">
<p>www.it-media.kiev.ua</p>
</div>

После этого модуль где прописан id="wrapper" должен «заливатся» фоном-видео.