Как разместить видеоролик с YouTube на своём сайте?

Когда мы находим в интернете интересные видеоролики или становимся свидетелями каких-нибудь интересных событий вокруг нас и всё это было заснято на камеру мобильного телефона, то возникает желание поделиться "этим добром" с кем-нибудь.

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

К примеру, ссылка на фильм "Йән" - первый башкирский короткометражный фильм ужасов:

http://youtu.be/ECTqYv83kw0

Если же мы хотим разместить этот видеоролик у себя на сайте, блоге или форуме, нам понадобиться html-код, который можно сгенерировать на YouTube на странице этого ролика:

<iframe width="560" height="315" src="http://www.youtube.com/embed/ECTqYv83kw0" frameborder="0" allowfullscreen="true"></iframe>

При этом видео будет выглядеть следующим образом:

Но как правило, этот код не всегда удовлетворяет нашим требованиям и стилю оформления. Поэтому в этой статье речь пойдёт о специальных ссылках, которые позволяют не только разместить видео на странице сайта, но и настроить видеопроигрыватель YouTube удобным для нас образом.

Для начала рассмотрим все основные элементы полученного html-кода:

<iframe width="560" height="315" src="http://www.youtube.com/embed/ECTqYv83kw0" frameborder="0" allowfullscreen></iframe>

Код состоит из тегов <ifarme></iframe>, которые указывают на внутренний фрейм, который позволяет встраивать на страницу другие внешние объекты, в нашем случае - это проигрыватель YouTube. С помощью атрибутов height и width задаются высота и ширина фрейма в пикселах. Атрибут frameborder задает толщину границы фрейма. А атрибут allowfullscreen разрешает просмотр видеоролика в полноэкранном режиме.

Также у тега <iframe> есть и другие атрибуты, которые могут быть полезны в некоторых случаях.

Самый важный атрибут это конечно же src, который указывает на источник - ссылка на страницу нашего видео. Как раз о ней стоит поговоить отдельно.

Ссылка на видеоролик YouTube может иметь следующий вид:

где в квадратных скобках указаны обязательные части - это HTTP или HTTPS-протокол и уникальный 11-и значный код видео, указывающий на нужный нам видеоролик на видеохостинге,
а в фигурных скобках указываются дополнительные параметры видеопроигрывателя Youtube, отвечающие за внешний вид самого проигрываетля, время, место и порядок воспроизведения видеоролика и различные функции по настройке данного видео (выбор качества, отображение название, рейтинга, субтитров и пр.).
В этом случае после кода видео ставится знак "?", который указывает браузеру на наличие дополнительных параметров.
С помощью знака "=" каждому параметру присваивается определённое значение.
Если используется несколько параметров, то они разделяются знаком "&".

Порядок размещения параметров значения не имеет.

Вот пример ссылки на тот же фильм "Йән" с дополнительными параметрами:

http://www.youtube.com/embed/ECTqYv83kw0?rel=0&version=1&controls=0&autoplay=0&hd=1&fs=0&showinfo=0

Прежде чем переходить к описанию дополнительных параметров следует заметить, что в ссылках на YouTube может быть использована следующая запись:

http://www.youtube-nocookie.com/embed/ECTqYv83kw0

которая отвечает за режим повышенной конфиденциальности (без cookie, чтобы на компьютере пользователя не сохранялись сведения о просмотренном видео).

Иногда встречаются ссылки (v-ссылки) вида http://youtube.googleapis.com/v/ECTqYv83kw0, которые также неплохо работают.

Итак переходим к самому интересному - описанию основных параметров.

Внешний вид проигрывателя YouTube:

version=1 - версия оболочки проигрывателя, 1 - более новая (по умолчанию), 2 - старая (этот параметр работает только для v-ссылок, а для embed-ссылок - не работает)

theme=dark - тёманя тема (по умолчанию)/light - светлая тема

Пример "светлого" видеопроигрывателя YouTube версии 1

border=0 - включает/выключает отображение рамки вокруг проигрывателя, 1 - рамка отображается, 0 - рамка не отображается (по умолчанию, этот параметр работает только для v-ссылок, а для embed-ссылок - не работает)

color=red/white - задаёт цвет полосы воспроизведения (красный или белый), красный - по умолчанию

color1 - задаёт основной цвет рамки RGB в шестнадцатеричном формате 0xb1b1b1

color2 - задаёт фоновый цвет панели управления и дополнительный цвет рамки в шестнадцатеричном формате 0xb1b1b1

Пример отображения проигрывателя YouTube с цветной рамкой и панелью управления

Воспроизведение видео:

autoplay=1 - автозапуск видео (воспроизведение видео начинается сразу после загрузки проигрывателя), 0 - выключено (по умолчанию), 1 - включено

loop=0 - включение повтора видео, 0 - повтор выключен (по окончанию видео остановится, по умолчанию), 1 - повтор включен (видео будет повторяться непрерывно) (этот параметр работает только для v-ссылок, а для embed-ссылок - не работает)

start=5 - запуск видео с 5ой секунды (см. пример ссылки: http://www.youtube.com/embed/ECTqYv83kw0?start=5)

end=10 - остановка видео на 10ой секунде (см. пример ссылки: http://www.youtube.com/embed/ECTqYv83kw0?end=10) (этот параметр работает только для embed-ссылок, а для v-ссылок - не работает)

Также воспроизведение видео можно запустить с нужного нам момента времени добавив к ссылке #t=03m22s, где m - минуты, s - секунды. Пример ссылки: http://www.youtube.com/embed/ECTqYv83kw0?#t=03m22s. Если длительность видео меньше указанного значения, то видео начнет воспроизводиться сначала с первой секунды.

Пример воспроизведения видео с 5ой секунды без остановок

Скрытие/показ элементов управления:

fs=0 - отображение кнопки перехода в полноэкранный режим, 0 - не отображать, 1 - отображать (по умолчанию)

controls=0 - отображение панели управления, 0 - не отображать, 1 - отображать (по умолчанию)

autohide=1 - автоматическое скрытие/появление панели управления через несколько секунд после прекращения движений мышью или нажатий клавиш, 0 - панель управления отображается постоянно (по умолчанию), 1 - панель скрывается

showinfo=0 - отображение названия, рейтинга и информации о видео сверху, 0 - не отображать, 1 - отображать (по умолчанию)

modestbranding=0 - отображение кнопки "просмотр на YouTube" на панели управления, 0 - кнопка включена (по умолчанию), 1 - кнопка выключена

Пример отображения проигрывателя YouTube без кнопок "Смотреть на YouTube.com" и просмотра в полноэкранном режиме

Пример отображения проигрывателя YouTube со скрытыми панелью управления и строкой с названием, рейтингом и дополнительной информацией

Разрешение/запрет использования горячих клавиш и просмотр HD-видео:

disablekb=1 - запретить горячие клавиши управления проигрывателем, 0 - разрешить (по умолчанию, этот параметр работает только для v-ссылок, а для embed-ссылок - не работает), 1 - запретить (см. горячие клавиши)

hd=1 - разрешить просмотр видео в HD-формате, 0 - запретить, 1 - разрешить (по умолчанию) {данный параметр почему-то не работает}

Отображение джинн-меню:

rel=0 - загрузка и отображение похожего видео в джинн-меню после просмотра исходного видео, 0 - не загружать, 1 - загружать (по умолчанию, этот параметр работает только для embed-ссылок, а для v-ссылок - не работает)

egm=0 - включает расширенное джинн-меню, 0 - выключено, 1 - включено - в этом режиме джин-меню (если оно есть) открывается при прохождении указателя мыши над областью воспроизведения видео, а не по нажатию кнопки меню (по умолчанию, этот параметр работает только для v-ссылок, а для embed-ссылок - не работает; когда проверял это свойство, то заметил, что во время воспроизведения при значении egm=1 пропадает логотип YouTube а при наведении в правый нижний угол и нажатии на левую клавишу мыши перехода на сайт YouTube не происходит) {Честно сказать, с этим параметром остались какие-то сомнения и неопределенности, и очень хочется спросить у разработчиков: "А что же такое джинн-меню и где оно появляется?"}

showsearch=0 - вывод окна поиска при свернутом видео, 0 - поиск отключен/не отображается, 1 - поиск включен/отображается (по умолчанию, этот параметр работает только для v-ссылок, а для embed-ссылок - не работает)

Аннотации и субтитры:

iv_load_policy=3 - отображение аннотаций; если в данном видео есть аннотации, то при значении 1 аннотации будут отображаться, а при значении 3 - будут скрыты (по умолчанию)

cc_load_policy=0 - отображение субтитров, 0 - субтитры не отображаются (по умолчанию), при значении 1 субтитры будут отображаться даже если они отключены пользователем

Дополнительные параметры:

fmt=6/18/22 - для воспроизведения видео в низком/среднем/высоком качествесоответственно, (при fmt=22 исходное видео должно быть загружено с высоким качеством) {данные параметры не работают}

hl=ru_RU – устанавливает локальные (языковые) предпочтения для видео, читается как "для русскоговорящих людей" (при желании их можно поменять)

enablejsapi=1 - разрешает/запрещает использование JavaScript API, 0 - запрещает (по умолчанию), 1 - разрешает, при этом ссылка на документацию по настройкам появляется слевой стороны страницы {следует уточнить}

playerapiid=player1 - строковое значение наименования проигрывателя для обращения через JavaScript API {следует уточнить}

Ну и в завершение стоит добавить, что существует ещё один устаревший, но проверенный способ вставки видео YouTube на сайт, который лучше "переваривается" старыми браузерами.

<object width="560" height="315">

<param name="movie" value="http://www.youtube.com/v/ECTqYv83kw0?hl=ru_RU&version=3"></param>

<param name="allowFullScreen" value="true"></param>

<param name="allowscriptaccess" value="always"></param>

<embed src="http://www.youtube.com/v/ECTqYv83kw0?hl=ru_RU&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>

</object>

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/ECTqYv83kw0?hl=ru_RU&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ECTqYv83kw0?hl=ru_RU&version=3" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

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

Пример видео, вставленного с помощью метода <object>

Горячие клавиши:

Пробел: воспроизведение/пауза

Стрелка влево: вернуться на 10% в текущем видео

Стрелка вправо: перейти на 10% вперед в текущем видео

Стрелка вверх: увеличить громкость

Стрелка вниз: уменьшить громкость

Дополнения и рекомендации:

1. Для "продающей страницы" лучше всего использовать ссылку

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

2. Для размещения на сайте, блоге или форуме можно использовать ссылку

- автоматически скрывать панель управления, не отображать информацию о видеоролике, не показывать кнопку "Смотреть на YouTube", не подгружать похожее видео и не отображать расширенное джинн-меню.

3. Для того чтобы размещённое на сайте видео показывалось в HD-качестве достаточно в конце дописать ?vq=hd720 или ?vq=hd1080. Подробности на сайте http://evgeniypopov.com/blog/kak-vyivesti-youtube-video-srazu-v-hd-kachestve.html.

Примечание: для выполнения этого параметра исходное видео должно быть изначально в HD-формате.

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

Параметры встроенного проигрывателя YouTube

Секреты YouTube

PS: Данное видео подготовлено студией © E7E-media и надеюсь что, оно Вам понравится.

Беседа с создателями первого башкирского короткометражного фильма ужасов "Йән"