Скачайте и установите 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'е.