Гость
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Скрипты для uCoz » Плейлист для сайта uCoz
Плейлист для сайта uCoz
Xemordio Offline Дата: Среда, 02.01.2019, 19:15 | Сообщение # 1
Администратор
Звание: Маршал [?]
Сообщений: 3498

Это в любое место ну там где будет плейлист.
Код
<script type="text/javascript">$(document).ready(function () {
$('.vid-item').each(function(index){
$(this).on('click', function(){
var current_index = index+1;
$('.vid-item .thumb').removeClass('active');
$('.vid-item:nth-child('+current_index+') .thumb').addClass('active');
});
});
});</script>

КСС:
Код
.vid-main-wrapper {width: 100%;max-width: 1100px;min-width: 440px;background: #212121;margin: 0 auto;}
.vid-container {position: relative;padding-bottom: 1%;padding-top: 1px; height: 0; width:85%;float:left;}
.vid-container iframe,.vid-container object,.vid-container embed {position: absolute;top: 0;left: 0;width: 100%;min-height: 360px;}
.vid-list-container {width: 15%;height:360px;overflow: hidden;float:right;overflow-y: auto;}
.vid-list-container:hover, .vid-list-container:focus {overflow-y: auto;}
ol#vid-list {margin:0;padding:0;background: #262626;}
ol#vid-list li {list-style: none;}
ol#vid-list li a {text-decoration: none;background-color: #262626;height:25px;display:block;padding:4px;border:1px solid #333333;margin:2px;}
ol#vid-list li a:hover {background-color:#303030}
.vid-thumb {float:left;margin-right: 8px;}
.active-vid { background:#3A3A3A;}
#vid-list .desc {color: #CACACA;font-size: 13px;margin-top:5px;}
@media (max-width: 624px) {body {margin: 15px;}
.vid-list-container {padding-bottom: 20px;}

Ну и сам код плейлиста:
Код
<div class="vid-main-wrapper clearfix">
<div class="vid-container">
<iframe id="vid_frame" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" src="ССЫЛКА НА ПЕРВУЮ СЕРИЮ" frameborder="0" width="100%" height="315">
</iframe></div>
<!-- THE PLAYLIST -->
<div class="vid-list-container">
<ol id="vid-list">
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">1 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">2 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">3 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">4 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">5 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">6 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">7 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">8 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">9 серия</div></a>
</li>
<li>
<a href="javascript:void();"
onClick="document.getElementById('vid_frame').src='ССЫЛКА НА СЕРИЮ'">
<div class="desc">10 серия</div></a>
</li>
</ul></div></div>


Сообщение отредактировал Xemordio - Пятница, 29.03.2019, 15:47
Дата регистрации: 22.07.2017
Форум » Web-Раздел » Скрипты для uCoz » Плейлист для сайта uCoz
  • Страница 1 из 1
  • 1
Поиск:

Обновленные темы

Мини-чат

Лучшие пользователи

Xemordio REP: 11[3498]
Infe[R]nos REP: 5[38]
Бармен REP: 7[31]
StraNNik REP: 1[25]
Waldemar REP: 0[12]
NL-Vincenz REP: 0[12]
Razilator REP: 14[7]
Ghosteron REP: 3[6]
Duzeppa26 REP: 4[5]
LENA_D REP: 0[5]

Статистика форума

Темы: 2439
Всего постов: 3643
Новый юзер:Rilack
Нас сегодня посетили:
Xemordio, Бармен, awsmtrainer, eda, Rilack