Особенности вставки и настройки видео с youtube на коммерческом сайте

При встраивании контента на сайт с видеохостинга youtube.com веб-технолог сталкивается с рядом типичных и нетипичных задач, решение которых отражено в данной статье. Конечно, можно обратиться за поиском к документации разработчиков http://developers.google.com/, но мы уже обобщили материал, изложенный там, исключили лишнее, адаптировали под нужды коммерческого сайта.

1. Вставка видеоролика с youtube на сайт.

Итак, первая и наиболее часто встречающаяся задача – это вставка видеоролика на сайт. Для решения этой задачи необходимо найти нужное видео на сайте http://youtube.com и вставить код следующего вида на свою страницу:

<iframe type="text/html" width="640" height="390" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"/>

Здесь VIDEO_ID – идентификатор необходимого нам видео, например, 'xw6wYcyI-Aw'.

Этот код также Вы можете получить автоматически, нажав на странице с видео на youtube кнопку “Поделиться" и выбрав пункт “html-код". В поле ввода Вы можете скопировать в буфере обмена код и вставить его на свою страницу.

После вставки кода мы получим страницу следующего вида:

2. Объединение youtube роликов в плейлист.

Зачастую нам нужно вывести на страницу не один ролик, а несколько, объединенных в плейлист канала на http://youtube.com.

В таком случае код нужно модифицировать следующим образом:

    <iframe type="text/html" width="640" height="390" src="http://www.youtube.com/embed/VIDEO_ID?list=PLAYLIST_ID" frameborder="0"/>

То есть в атрибут 'src' нужно добавить параметр '?list=PLAYLIST_ID', где PLAYLIST_ID – идентификатор плейлиста, например 'PL-QXPTHVI31NwIGf9XtUbUOEAZv9BQQwv'. И тогда вставленное видео будет иметь следующий вид:

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

3. Вставка нескольких youtube-видео из одного плейлиста на страницу.

Если вставить несколько видео стандартным способом, то мы получим следующую страницу:

Решение:
сформировать плейлист вручную, и тогда у каждого видео будет своя миниатюра. Для этого нужно сформировать список идентификаторов видеороликов плейлиста, разделенных между собой запятыми, и добавить его в атрибут src параметром 'playlist'.

Пример:

<?
    $playlist='jwTpFlrZkoo,mLoh40B4MJo,jZ7aGMbFJQ4,-0zy4srVqOY,ld-4vksQ6p0, rKZJVOyu9R0, 60kVgv5rbrQ, SHBd04IX7YQ, Zgs3AJQu_0I';
?>    
<iframe width="480" height="270" src="https://www.youtube.com/embed/xw6wYcyI-Aw?playlist=<?= $playlist ?>&rel=0" style="margin-right: 15px;" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" src="https://www.youtube.com/embed/jtFkC3Z2-M8?playlist=<?= $playlist ?>&rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" src="https://www.youtube.com/embed/HN8GBG0JtUA?playlist=<?= $playlist ?>&rel=0" style="margin-right: 15px;" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" src="https://www.youtube.com/embed/pFUdPJeBdAU?playlist=<?= $playlist ?>&rel=0" frameborder="0" allowfullscreen></iframe>

В таком случае страница примет нужный нам вид:

4. Замена картинки на youtube-видео.

При использовании стандартных способов вставки видеоролика на страницу нет возможности управлять расположением элементов управления плеера, поэтому иногда кнопка “play" находится прямо в области лица человека, снятого на видео, что может быть недопустимым на коммерческих сайтах, использующих видеоотзывы клиентов.

Стандартная миниатюра выглядит так:

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

Есть два решения:

1) Замена стандартной картинки пользовательской.
Выбираем кадр видео, подходящий на роль миниатюры. Затем в фотошопе или другом графическом редакторе обрезаем картинку так, чтобы область лица была в левой или правой части кадра. Заходим в менеджер видео на http://youtube.com/ и загружаем свой значок видео:

И получаем такое отображение видео:

2) Подготовка миниатюры с подписью.
Мы видим, что примерно 50% области миниатюры видео не несет смысловой нагрузки, поэтому на этом месте можно разместить блок либо о сути видео, либо о владельце канала, либо с любой другой продающей информацией. И тогда миниатюра примет такой вид:

5. Проигрывание youtube ролика с определенного момента.

Бывают случаи, когда необходимо начать проигрывать видео, например, со второй минуты.
Тогда можно в атрибут src добавить параметр "start", и воспроизведение начнется с нужной нам секунды.

Пример:

<iframe width="480" height="270" src="https://www.youtube.com/embed/xw6wYcyI-Aw?start=60" style="margin-right: 15px;" frameborder="0" allowfullscreen></iframe>

В примере воспроизведение начнется с шестидесятой секунды.

6. Автовоспроизведение youtube ролика.

Чтобы видео начало проигрываться сразу после загрузки страницы, нужно добавить параметр "autoplay=1":

<iframe width="560" height="315" src="https://www.youtube.com/embed/rKZJVOyu9R0?autoplay=1" frameborder="0"></iframe>

7. Отключение показа похожих youtube видеороликов.

Отключить показ похожих видео после конца воспроизведения ролика можно, прописав параметр "rel=0":

<iframe width="560" height="315" src="https://www.youtube.com/embed/rKZJVOyu9R0?rel=0" frameborder="0"></iframe>

Автор: Буякова Екатерина - Web-технолог интернет-агентства Brandmaker.