Видео YouTube в модальном окне prettyPhoto

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

Для этих целей, было решено использовать всемирно известный jQuery плагин prettyPhoto. Для применения данного плагина потребуются лишь следующие, несложные действия:

подключить на странице его стили,

<link rel='stylesheet' href='css/prettyPhoto.css' type='text/css' media='all' />

подключить сам jQuery,

<script src="js/jquery-1.6.1.min.js"></script>

подключить сам плагин

<script src="js/jquery.prettyPhoto.js"></script>

и разместить на странице код для вызова содержимого YouTube. Как видите, в ссылке использован атрибут rel="prettyPhoto".

<a href="http://www.youtube.com/watch?v=fcoNym1Q1Ds" rel="prettyPhoto" title="Заголовок">
<img src="https://i.ytimg.com/vi/fcoNym1Q1Ds/hqdefault.jpg" alt="YouTube" width="60" />
</a>

После ссылки на видео необходимо вызвать инициализацию плагина:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

Для вызова и используется тот самый атрибут rel="prettyPhoto".

Ссылка на видео размещена, далее необходимо настроить некоторые параметры воспроизведения, а именно: отключить видеоаннотации, заголовок и самое важное — выключить после проигрывания показ похожих, по мнению YouTube, роликов.

Все настройки производятся средствами YouTube Player API. Для отображения на странице параметров кликните по кнопке Показать параметры проигрывателя.

Суть в том, что описанное API предназначено для фрейма, у нас же пока просто ссылка заключенная в тег a, а фрейм вызывается только после клика по ней.

Если, на его месте написать iframe, то видео будет воспроизводится на странице в то время, когда нужно в модальном окне. Так что, потребуются кастомные параметры скрипта. Полный скрипт вы можете посмотреть здесь и вероятно найдете в нем кое-что полезное для себя.

В рядовом случае достаточно следующего:

<!-- ссылка на видео -->
<a title="Pug Life - Simon's Cat" rel="prettyPhoto" href="https://www.youtube.com/watch?v=fcoNym1Q1Ds&rel=0">
	<img class="scale-with-grid" src="https://i.ytimg.com/vi/fcoNym1Q1Ds/hqdefault.jpg" width="626" height="352" alt="Simon's Cat Pug Life" />
</a>

<!-- указываем настройки YouTube в iframe -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
        iframe_markup: '<iframe src ="{path}&autohide=1&iv_load_policy=3&iv_load_policy=3&showinfo=0" width="{width}" height="{height}" frameborder="no"></iframe>'
    });
});
</script>

Ниже описаны использованные параметры YouTube API:

autohide=1 // Скрываем элементы управления и индикатор загрузки через несколько секунд после начала воспроизведения

iv_load_policy=3 // Отключает долбанные видеоаннотации

rel=0 // После завершения проигрывания, отключаем показ похожего видео

showinfo=0 // Отключаем заголовок в окне видео

После каждого параметра должен стоять амперсанд &. Из всех параметров я описал только те, которые потребовались мне. Если, вам потребуется больше, то перейдите по ссылке выше на страницу демонстрации YouTube Player API, там все доступно описано.

В YouTube Player API существует параметр autoplay позволяющий автоматически запускать воспроизведение, но благодаря возможностям плагина он не потребуется. Если же нужно отключить автоматическое воспроизведение, то эта возможность предусмотрена в кастомном скрипте.

Стоит уделить особое внимание параметру rel. Заметьте, это единственный параметр который указан сразу после ссылки на видео, а не в кастомном скрипте. Причина в том, что плагин автоматически подставляет этот параметр в фрейм со значением равному 1. Догадываюсь, что с этим параметром в плагине была какая-то проблема вплоть до версии 3.1.2. В Version history на официальном сайте написан комментарий к этой версии:

It’s now possible to add ?rel=0 to YouTube url to disable related videos at the end of a YouTube video.

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

Не хватает лишь маленькой, но очень важной детали. Сейчас, взглянув на изображение, посетителю не очевидно, что стоит ему кликнуть по нему, как тут же откроется окно и в нем воспроизведется видео.

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

По просьбе Raistlin дополняю статью параметрами для плейлиста.

Плейлист YouTube в модальном окне prettyPhoto

Если, вы хотите использовать уже существующий на YouTube плейлист, то в кастомном скрипте необходимо дописать его идентификатор и тип плейлиса.

Существует несколько типов плейлиста:

playlist // Указываем id существующего плейлиста. Должен начинаться с букв PL
user_uploads // Указываем название канала с которого будут загружаться ролики. Например написав simoncat, мы загрузим все видео ролики этого https://www.youtube.com/user/simonscat/videos канала
search // Довольно интересный параметр. Он задает поисковый запрос по которому будут подобраны ролики.

Важно: обратите внимание, плейлисты начинаются с букв PL, так и должно быть.
Параметр search интересен тем, что по одному и тому же запросу, разные пользователи могут увидеть различный контент. Известно, что YouTube подсовывает видео в соответствии с предыдущими запросами пользователя и еще неизвестно чем. Даже не представляю — где на практике это может пригодится, но есть такая фича.

Указываем в кастомном скрипте id существующего плейлиста:

<!-- указываем настройки YouTube в iframe -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
        iframe_markup: '<iframe src ="{path}&list=PLagyxbJHFyL11iTef4c6ALIDsD--nXkel&listType=playlist&autohide=1&iv_load_policy=3&iv_load_policy=3" frameborder="no"></iframe>'
    });
});
</script>

Еще одна особенность: параметр showinfo отвечающий за заголовок видео, со значением 0 отключит и значок в верхнем левом углу вызывающий выплывающий список видео. Таким образом, вы лишите посетителя возможности выбирать видео из списка.

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

<!-- указываем настройки YouTube в iframe -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
        iframe_markup: '<iframe src ="{path}&list=simonscat&listType=user_uploads&autohide=1&iv_load_policy=3&iv_load_policy=3" frameborder="no"></iframe>'
    });
});
</script>

Приятным бонусом может оказаться возможность самому составлять плейлист из необходимых роликов.

<!-- указываем настройки YouTube в iframe -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
        iframe_markup: '<iframe src ="{path}&playlist=OsOYg5gpS0s,kWuIGAZ1x2I,Dzz6lUsF19g,OQwD0QCbxaA,3PtFwlKfvHI&autohide=1&iv_load_policy=3&iv_load_policy=3" frameborder="no"></iframe>'
    });
});
</script>

Для этого, идентификаторы видео нужно перечислить через запятую после параметра playlist.

Как видно принцип прост: указываем тип плейлиста (за исключением составленного самостоятельно) и его идентификатор.