Авто переключатель размера плеера для сайта онлайн кинотеатр на uCoz    
Радио Business FM прямой эфир.
Главная » 2017 » Март » 29 » Авто переключатель размера плеера для сайта онлайн кинотеатр на uCoz » [231]
20:21
Авто переключатель размера плеера для сайта онлайн кинотеатр на uCoz

Авто переключатель размера плеера для сайта онлайн кинотеатр на uCoz - Для сайта онлайн кинотеатр переключатель плееров, так как некоторые на один фильм, ставят не один а 2 или 3 плеера сразу. И будут вам стили под авто размер и любой каркас.

Для сайта онлайн кинотеатр переключатель плееров, так как некоторые на один фильм, ставят не один а 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/

 

 

Источник

счетчик посещений

Категория: Веб-Мастер | Просмотров: 231 | :: : | Теги: HTML и CSS, HTML код, для сайта, авто размер плеера, веб мастер
Всего комментариев: 0
avatar