Любителям вставлять в свои посты ютубовские ролики, предлагаю интересный плеер для этого видео сервиса.
Плеер отличается от встроенного тем, что имеет минималистичный дизайн (впишется в любой текстовой блог) и в развёрнутом виде вызывается в отдельном всплывающем окне. Одним словом (двумя), всё по-взрослому. Помимо превью-картинки, отображается название, количество просмотров, категория и рейтинг. Настоящая няшка (в браузерах не проверял, тестите сами ^^).
Сразу даю демку:
К сожалению, не всё так гладко, как хотелось бы, и настройки стилей, а именно позиционирование элементов плеера, придётся подбирать вручную. К слову, в этом шаблоне всё равзвалилось, и для демо пришлось насильственно выставлять опции. А на тестовом шаблоне встало замечательно с почти дефолтовыми параметрами.
Установка до этапа настройки не сложная. Изначально нужно иметь в блоге библиотеку jQuery. Как это делается, написано здесь.
Второй момент - нужно сходить на страницу автора-разработчика и скачать архив.
В архиве такая структура файлов и папок:
Синим помечен файл стилей, из которого придётся брать настройки для внешего вида плеера. Стили надо "отработать" сначала на тестовом блоге, потом положить либо в отдельный файл, либо вставить в шаблон, либо на страницу, но в последнем случае следует учесть, что их действие также будет рапространяться только на эту страницу.
Красным обведена папка со статическими файлами: картинки кнопок пауза, плей и т.д. Все закачиваем в блоггер через редактор постов или напрямую в альбом пикассы. Получившиеся ссылки вставляем в стили, о которых только что шла речь.
Оранжевым цветом я пометил скрипты. Их нужно положить на внешний хостинг, но не все. Файл jquery.js брать не надо, если эта библиотека уже установлена в блоге.
Со скриптами тоже самое. Либо на хостинг и прописать в шаблоне, либо на хостинг и прописать на странице.
Подключение блока с видеороликом происходит с помощью контейнеров:
<div class="wrapper"> <div class="player"> <div class="video-идешник_ролика" id="video"> </div> </div> </div>
Где "идешник" ролика это id файла на ютубе. Вот пример:
ссылка .
Это как раз идешник файла на серверах ютуба.
Для ориентировки вот мои стили (иконки я уже переложил на хостинг 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hXpMw5POG_sXHcFWl1kJJOb300hWPBe2OW0_8gJt_Gc8KzSBZwSYc7x194cfw6tPlvkr1PvOWNprBi2TIrCmwELnsIhUhERJV7hExIkLQhtR0ghoXiSq_DWf-BufVdx3Y4DVVwQDUKA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjduoYohHCwfLzLaFViTv4S1iWe5FrUDzyNCzGBKBiNvulvwfrVCLaR8z9DZRAOB0Xq115YTO5EbwqWQISeaEk38ytSWzIwL4XvV5frdbZqZHwybF-9-V3HGDV7cwAy0TKZnqVAHvuYisw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxsyq-1Qw34c5MGeStrdFgv-9BbK_n3c3qbRn4Zi3gf_00X44segFUXSvBYbSemK3pmtwl61CfPK3t76l7LrthOw9LRGKMtWYF_7bouXX9POJqohd4hKt5bZeBMNgB0rMFARyM0JgEqas/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hXpMw5POG_sXHcFWl1kJJOb300hWPBe2OW0_8gJt_Gc8KzSBZwSYc7x194cfw6tPlvkr1PvOWNprBi2TIrCmwELnsIhUhERJV7hExIkLQhtR0ghoXiSq_DWf-BufVdx3Y4DVVwQDUKA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8OdNkHcmALDTgD2XV5r4WoIRlpErMbRqhd1isyH9mQ8t3kdrERdA9UD1mqZ74W_wxOXWdVqrfdfZFJm7OdcsOblTWcjNzmCc5SDfd8qK8nlo_ngvXkWaO7Wl3DvaEEf25Ztm5ojfZLcc/s1600/play.png);
}
.controls .pause {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKk3X1NSeJUDCfmVg5JBqcWZVcw3kxgnVyQJfWs2DYeTfx3PBkgISinkiNTf3RlUl13Yvc9fRra_ECT5afUaSkKrflilZ7bFY2u6RIjpfj9ByF5zb7cSnswZrsqv5cIilO9gXQR5tWA6k/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>О всех неточностях и непонятках пишите в комменты, у меня вроде всё работает :).
Комментариев нет:
Отправить комментарий