Как проигрывать видеоролики в блоге или Альтернативный плеер для Youtube

Любителям вставлять в свои посты ютубовские ролики, предлагаю интересный плеер для этого видео сервиса.
Плеер отличается от встроенного тем, что имеет минималистичный дизайн (впишется в любой текстовой блог) и в развёрнутом виде вызывается в отдельном всплывающем окне. Одним словом (двумя), всё по-взрослому. Помимо превью-картинки, отображается название, количество просмотров, категория и рейтинг. Настоящая няшка (в браузерах не проверял, тестите сами ^^).
Сразу даю демку:

К сожалению, не всё так гладко, как хотелось бы, и настройки стилей, а именно позиционирование элементов плеера, придётся подбирать вручную. К слову, в этом шаблоне всё равзвалилось, и для демо пришлось насильственно выставлять опции. А на тестовом шаблоне встало замечательно с почти дефолтовыми параметрами.

Установка до этапа настройки не сложная. Изначально нужно иметь в блоге библиотеку jQuery. Как это делается, написано здесь.
Второй момент - нужно сходить на страницу автора-разработчика и скачать архив.

В архиве такая структура файлов и папок:

Синим помечен файл стилей, из которого придётся брать настройки для внешего вида плеера. Стили надо "отработать" сначала на тестовом блоге, потом положить либо в отдельный файл, либо вставить в шаблон, либо на страницу, но в последнем случае следует учесть, что их действие также будет рапространяться только на эту страницу.

Красным обведена папка со статическими файлами: картинки кнопок пауза, плей и т.д. Все закачиваем в блоггер через редактор постов или напрямую в альбом пикассы. Получившиеся ссылки вставляем в стили, о которых только что шла речь.

Оранжевым цветом я пометил скрипты. Их нужно положить на внешний хостинг, но не все. Файл jquery.js брать не надо, если эта библиотека уже установлена в блоге.
Со скриптами тоже самое. Либо на хостинг и прописать в шаблоне, либо на хостинг и прописать на странице.

Подключение блока с видеороликом происходит с помощью контейнеров:

<div class="wrapper">
<div class="player">
<div class="video-идешник_ролика" id="video">
</div>
</div>
</div>

Где "идешник" ролика это id файла на ютубе. Вот пример:
ссылка http://www.youtube.com/watch?v=m0Ulor-KnZU.
Это как раз идешник файла на серверах ютуба.

Для ориентировки вот мои стили (иконки я уже переложил на хостинг Blogger):

<style>
#content .wrapper-inside {
background:none;
}

.wrapper {
width:1000px;
height: 100px;
margin:0px -100 0;
}

.player {
width:380px;
position:relative;
margin:0 auto;
}

.ytube {
display:none;
position:absolute;
top:105px;
left:-200px;
width:500px;
height:350px;
padding:10px;
background:url(http://3.bp.blogspot.com/-zkkXMkhRvJA/Tp7E840TuRI/AAAAAAAAGXY/0ezBnY1oWJk/s1600/opac.png) repeat;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 4px #000;
-webkit-box-shadow:0 0 4px #000;
box-shadow:0 0 4px #000;
}

.ytube .stop {
display:block;
position:absolute;
top:4px;
right:4px;
width:16px;
height:16px;
text-indent:-9999px;
outline:none;
background:url(http://2.bp.blogspot.com/-tB91eUuvUT0/Tp7FDkTvLmI/AAAAAAAAGX8/CM_N5QfoQ2k/s1600/stop.png) no-repeat;
}


#video {
float:left;
clear:both;
width:380px;
}

#video .image {
float:left;
width:120px;
height:90px;
font-size:0;
line-height:0;
overflow:hidden;
position:relative;
-moz-box-shadow:0 0 4px #000;
-webkit-box-shadow:0 0 4px #000;
box-shadow:0 0 4px #000;
}

#video .entry {
float:right;
width:245px;
margin:-100px -45 0;
font-weight:bold;
}

.entry .title {
padding:0;
margin:0;
margin-bottom:5px;
font-weight:bold;
font-size:13px;
color:#efefef;
text-shadow:1px 1px 0 #212121;
}

.entry span {
margin-right:8px;
font-size:10px;
font-weight:normal;
color:#999;
}

.entry .favs {
display:block;
background:url(http://4.bp.blogspot.com/--lBJWVFONGY/Tp7E8pfxWBI/AAAAAAAAGXI/AUykrRD0bos/s1600/favs.png) no-repeat left center;
padding-left:20px;
margin-bottom:5px;
}

.image .controls {
position:absolute;
top:50%;
left:50%;
margin:-17px 0 0 -20px;
padding:10px 15px;
background:url(http://3.bp.blogspot.com/-zkkXMkhRvJA/Tp7E840TuRI/AAAAAAAAGXY/0ezBnY1oWJk/s1600/opac.png) repeat;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}

.controls a {
float:left;
display:block;
text-indent:-9999px;
outline:none;
width:10px;
height:15px;
background-repeat:no-repeat;
}

.controls .play {
background-image:url(http://3.bp.blogspot.com/-92o81r9QYmc/Tp7E9QBp0qI/AAAAAAAAGXs/4pAyfivyP9g/s1600/play.png);
}

.controls .pause {
background-image:url(http://1.bp.blogspot.com/-kvaTn0nna38/Tp7E9GZ82gI/AAAAAAAAGXk/NtFkEzqDJWI/s1600/pause.png);
}
</style>

Обращаю внимания на:
.wrapper - здесь ширина и высота враппера, чтобы плеер не мешал другим элементам на странице. Весь плеер двигать можно здесь.
#video .entry - информационная половинка плеера, если сместилась, то двигайте её.
Стили для образца я приложил...

И использованные скрипты:

<script src="http://ваш_хостинг/swfobject.js" type="text/javascript">
</script>
<script src="http://ваш_хостинг/tubeplayer.js" type="text/javascript">
</script>
<script src="http://ваш_хостинг/init.js" type="text/javascript">
</script>

О всех неточностях и непонятках пишите в комменты, у меня вроде всё работает :).




ps: Для разрядки... учимся рисовать енота↓