Один из простых плей-листа видео для сайта

Когда то сидел химичил   
Код для создания плей листа

<div class="bicbai_knopka">
  <a class="bicbai_spicoc">Выбор серии</a>
  <div class="bicbai_list">
<span data-src="//video.sibnet.ru/shell.php?videoid=3293583" onclick="return seriaanime(this);"> 1 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3296574" onclick="return seriaanime(this);"> 2 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3300869" onclick="return seriaanime(this);"> 3 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3305638" onclick="return seriaanime(this);"> 4 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3310473" onclick="return seriaanime(this);"> 5 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3339544" onclick="return seriaanime(this);"> 6 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3342285" onclick="return seriaanime(this);"> 7 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3346853" onclick="return seriaanime(this);"> 8 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3377844" onclick="return seriaanime(this);"> 9 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3382512" onclick="return seriaanime(this);"> 10 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3393074" onclick="return seriaanime(this);"> 11 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3393075" onclick="return seriaanime(this);"> 12 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3401251" onclick="return seriaanime(this);"> 13 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3404544" onclick="return seriaanime(this);"> 14 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3409939" onclick="return seriaanime(this);"> 15 серия</span>
<span data-src="//video.sibnet.ru/shell.php?videoid=3413773" onclick="return seriaanime(this);"> 16 серия</span>
  </div>
</div>

<iframe id="playbicbai" src="//video.sibnet.ru/shell.php?videoid=3293583" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" frameborder="0" height="400" width="600"></iframe>

Стиль css

<style>
.bicbai_spicoc {
   background-color: #fafafa;
    color: black;
    padding: 5px;
    line-height: 50px;
    border: none;
}

.bicbai_knopka {
    position: absolute;
    display: inline-block;
    cursor: pointer;
}

.bicbai_list {
    display: none;
   position: absolute;
    background-color: #f1f1f1;
    min-width: 100px;
    max-height: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   margin: -11px -0px 0px -0px;
    z-index: 1;
   overflow: auto;
    white-space: nowrap;
}

.bicbai_list span{
    color: black;
    padding: 5px 7px;
    text-decoration: none;
   display: block;
}

.bicbai_list span:hover{background-color: #ddd;}
.activespawn{background-color: #ddd;}
.bicbai_knopka:hover .bicbai_list {display: block;}
.bicbai_knopka:hover .bicbai_spicoc {background-color: #000; color: white;}
</style>

JS скрипт для смены видео

<script>
function seriaanime(el){
    $('#playbicbai').attr('src', $(el).data('src'));
}
</script>

Вроде всё, много кода конечно :)

---

Вернуться назад