Как вставить в статью видеоклип (Youtube) с плейлистом


Тема Youtube до конца раскрыта, поэтому продолжаю пилить... (возможно, она золотая?).
Как прокачивать блог правильными скриптами для видеороликов с ютуба (подсказки, модалки) - читайте в передыдущих выпусках, а сегодня я напишу о том, как постить в теле статьи плеер с плейлистом, потому что бывают случаи, когда нобходимо выложить несколько тематических ссылок на видеоклипы, и сделать это надо элегантно.
Где можно установить это скрипт? Без разницы: на любом нормальном движке.

Я нашёл очень удачный скрипт, он так и называется youtubeplaylist.

Демонстрация работы этого скрипта:









Установка.
Скрипт работает от jQuery, поэтому ссылка на эту библиотеку должна находится в блоге.
Сам скрипт youtubeplaylist с примерами нужно скачать со странички проекта на geckohub или отсюда.
Стили для текущего примера можете скачать с моего сервера (я их немного того переделал).
Всё это прописывается в голову (между тегами <head></head>) шаблона блога в таком виде:
<script src="http://ваш-хостинг/jquery.youtubeplaylist.js" type="text/javascript">
</script><link href="ваш-хостинг/youtubeplaylist.css" rel="stylesheet" type="text/css"></link>
Наверное понятно, что если блог на Blogger, то файлы необходимо положить на внешний хостинг.

Скрипт подключения:
<script>
$(function() {
	$("ul.video1").ytplaylist();
});
</script>
Здесь он в простейшем виде (более серьёзно опишу в продолжении статьи).
Обратить внимание:
ul.video1 говорит, что будет обрабатываться список роликов (ul) под классом video1

И html код, которым выводятся ролики в теле поста моего блога:
<div class="yt_holder">David Bowie Videos
<div id="ytvideo"></div>
<ul class="video1" id="youtubeplaylist">
<li class="listing"><a href="http://www.youtube.com/watch?v=r8NZa9wYZ_U&ob=av2n">Absolute Beginners</a></li>
<li class="listing"><a href="http://www.youtube.com/watch?v=8S227FFNwl8">Thursdays child </a></li>
<li class="listing"><a href="http://www.youtube.com/watch?v=ZM0e1m9T9HQ&feature=related">The Man Who Sold The World</a></li>
</ul>
</div>
С этим кодом всё просто: меняете ссылки на свои и всё.
Для разных групп плейлистов заведите другие классы, например, video2, video3 и т.д.

Продолжение следует...

Комментариев нет:

Отправка комментария