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

Всем привет. Позавчера в ВК списался с одним парнем, который хотел сделать видеофон для сайта. (Привет Стас :) Надеюсь ты не против, что я пишу эту статью подобным образом). Так вот, у него возникла проблема. С его слов я понял, что он делает сайт на конструкторе и загрузить свои видео на хостинг - нет возможности. Единственный способ, как он сказал, это подключить видео со стороннего сервиса.

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

Эта идея мне показалась очень интересной, и я решил разобраться, как это можно сделать. Признаться, когда я готовил первую статью о том, как сделать видео фоном сайта, то натыкался на подобный материал и знал, что это возможно, но разбираться не стал, а тут такой случай!

Я скинул Станиславу 2 ссылки, одну с хабра, одну с другого сайта. Сказал, что вот варианты, но я сам не тестировал и не знаю получиться ли. Он поблагодарил и пообещал отписаться о результатах. То есть еще один человек, который не остался равнодушен. Спасибо таким людям.

Вот я и решил поделиться с вами одним таким способом, думаю, что многим будет интересно.

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

Скачать исходник

Первым делом нужно скачать исходник, там в папке js будет лежать 2 скрипта. Их нужно скопировать в свой проект. После этого подключаем jquery и прописываем пути к скриптам:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- подключаем jquery -->
<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 -->

Теперь, для того, чтобы вставить свое видео, нужно в скрипт подставит id видео файла из ссылки на Youtube:

Файл index.js:

Обратите внимание, я выделил красной стрелочкой id видео ролика, которое использую для примера в исходнике. Взять его можно здесь:

Убедитесь, что в ролике не присутствует реклама или ссылки на другие материалы, как в примере выше. Я специально взял такое видео, чтобы вы наглядно убедились и не допустили подобной ошибки. Start: 3 - означает, что видео начнет воспроизводится с 3 секунды. Другие настройки найдете в файле jquery.tubular.1.0.js, начиная с 19 строки. Звук, ширина и высота, кнопки управления и т.д.

Еще, важным элементом является то, что нужно заполнить видеофоном конкретную область. В скрипте используется контейнер с id="wrapper". Как по мне, то это очень удобно.

<div id="wrapper">

 <p>smartlanding.biz</p>

</div>

А на сегодня - все! Теперь вы знаете как поставить видео с Youtube на фон сайта. Всем пока!

P.s.: Для того, чтобы посмотреть результат, залейте на локальный или реальный сервер.