Тема 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 и т.д.
Продолжение следует...
Комментариев нет:
Отправить комментарий