Как ...

Установка

Скачайте и установите jQuery. Инструкция на оф. сайте (по-английски). Например так:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js" defer></script>

Скачайте и установите плагин ytShownotes. Например так:

<script type="text/javascript" src="jquery.ytShownotes.js" defer></script>

Не используйте ссылку, которую вы можете увидеть в коде этого сайта - она может поменяться!

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

Использование

Блок для видео

Перед использованием плагина необходимо в html-код страницы вставить блок, куда будет помещаться видео, и назначить ему определённый идентификатор.

<div id="ytShownotesWrapper">
  <div id="ytShownotesPlayer">
  </div>
</div>

Блок-обёртка должен иметь идентификатор ytShownotesWrapper. Внутрь него будет вставляться iframe с идентификатором ytShownotesPlayer.

Формат данных

Данный плагин использует определённый формат данных. Прежде всего нужно привести данные в нужный формат. Если же данные уже в нужном формате, то смотрите пункт Инициализация.

Использование генератора

На странице Иструментарий расположен генератор данных в нужный формат.

На странице генератора необходимо обязательно указать ссылку на Youtube-видео и указать описание.

Необязательными параметрами являются время старта и остановки ролика, также необязательно указывать размер блока с видео (по умолчанию 640 на 360 пикселей).

Кнопка Добавить добавит ссылку на видео в список. Кнопка Удалить удалит из списка.

Кнопка Предпросмотр позволит просмотреть видео без добавления в список.

Кнопка Очистить очищает лишь поля формы, но не список.

Поля Тег и Класс позволяют сгенерировать данные из списка в нужный формат, обернув их в указанный вами тег (по умолчанию div) и задать определённый класс (по умолчанию ytShownotes).

Кнопка Получить HTML отобразит полученный код внизу. Эти данные готовы для использования.

Инициализация плагина и привязка к данным

Для инициализации плагина и прявязки его к данным необходимо вызвать следующую функцию плагина:

$('.ytShownotes').ytShownotes();

или же явно указать событие, к которому привязывается запуск плеера:

$('.ytShownotes').ytShownotes('click');

где .ytShownotes - это класс, в котором содержатся данные, а click - это событие клика на элемент;

Работает?

Если вы проделали все шаги правильно, то по клику на ваши данные в блоке div#ytShownotesWrapper будет запущено указанное вами видео с указанными вами параметрами.

Не работает?

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

Если после повторной проверки плагин не заработал, то оставьте сообщение об ошибке здесь.

Вопросы и прочие предложения также оставляйте на странице Issues на GitHub'е.