Для сайта онлайн кинотеатр переключатель плееров, так как некоторые на один фильм, ставят не один а 2 или 3 плеера сразу. И будут вам стили под авто размер и любой каркас.
Но начнем мы с переключателя, это может пойти под части фильма или сериал не более где 4 серии. А так основном его ставят на один фильм и просто дублируют несколькими плеерами, на тот случай, если один откажет. И теперь вы можете поставить полностью рабочий скрипт, так как сейчас его проверил и он работает. И вверху у него будут красивые переключатели, и если одна кнопка становиться немного больше, значит на этой и показывает и немного меняется сам оттенок ее.
И так начнем установку:
Идем в CSS и там ставим стиль.
Код:
p {padding: 7px 0;}
.sectiontable {
width: 100%;
margin: 10 0 30px;
}
ul.tabs {
height: 34px;
padding:0px 0 5 0px;
line-height: 25px;
list-style: none;
}
.tabs li {
float: left;
display: inline;
margin: 0 3px -1px 0;
padding: 0 13px 1px;
border-radius:4px;
color: #8EFFFB;
cursor: pointer;
background: #121212;
border: 1px solid #E4E4E4;
border: 1px solid #5E5E5E;
position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
color: #FFF;
padding: 0 13px;
background: #21585C;
border: 1px solid #666555;
}
.tabs li.current {
color: #FFFAA5;
background: #3C9CB9;
padding: 0 13px 2px;
border: 1px solid #3C9CB9;
}
.box {
display: none;
border-radius: 3px;
border: 1px solid #E4E1E1;
border-width: 0 1px 1px;
background: #DEDDDD;
}
.box.visible {
display: block;
}
.section.vertical {
width: 440px;
border-left: 160px solid #FFF;
}
.vertical .tabs {
width: 160px;
float: left;
display: inline;
margin: 0 0 0 -160px;
}
.vertical .tabs li {
padding: 0 13px;
margin: 0 0 1px;
border: 1px solid #E4E4E4;
border-right: 1px solid #F9F9F9;
width: 132px;
height: 25px;
}
.vertical .tabs li:hover {
width: 131px;
}
.vertical .tabs li.current {
width: 133px;
color: #444;
background: #EFEFEF;
border: 1px solid #D4D4D4;
border-right: 1px solid #EFEFEF;
margin-right: -1px;
}
.vertical .box {
border-width: 1px;
}
Теперь сам каркас, где вы будете его ставить и в него плееры, сделаем на 2 переключателя, если вам нужно три, то просто первый берем и продолжаем дальше его прописывать.
Код:
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Fyrkes/Zret/tables.js"></script>
<div class="sectiontable" id="multmult">
<ul class="tabs">
<li class="current">Первый плеер</li>
<li>Второй плеер</li>
</ul>
<div class="box visible">
Код плеера
</div>
<div class="box">
Код плеера 2
</div>
</div>
Вот мы поставили каркас или обвод, если так можно сказать, вообщем чтоб красиво было и переключать удобно. Но кто то меняет дизайн и у шаблона совершенно другие параметры и ему нужно каждый фильм потом подгонять, это очень муторно и долго, когда все можно стилями исправить.
Идем опять в CSS и там ставим этот стиль.
Код:
/* PLEER */
.videoPlayer embed,
.videoPlayer object,
.videoPlayer iframe {width: 687px !important; height:380px; padding: 10px 10px 8px 10px;!important;}
На нем и выставляем ширину и высоту, также если у вас обвод, то 10px 10px 8px 10px можете отредактировать, как на изображение видим, он у нас светло серый, по всем сторонам.
Но это не все, теперь нам нужно зайти вид материала и комментариев, мы возьмем каталог файлов. Там находим, то что выводит описание и все остальное, это MESSAGE что и нужно его заключить , а точнее должен быть так.
Код:
<div class="videoPlayer">$MESSAGE$</div>
И так то все, ставим и все потом настраиваем как вам нужно, скачивать не чего нам не нужно и заливать в корень сайта.
 Видео канал: /youtube.com/
Источник ☞
| 
РАБОТА
