Пишут в статье, что видео с боковыми вставками переключателями можно сделать с помощью кода ниже, но куда что вставлять ... беда прям ...
Код: Выделить всё
<style>
.gallery {
display: flex;
flex-flow: wrap;
border: solid rgb(240,240,240);
}
.gallery div { /* блоки видео + списков */
flex: 150px;
position: relative;
text-align: center;
}
.gallery div:nth-of-type(1) {
flex: 10000 1 300px; /* если ширина менее 300 + 150 = 450px , то списки миниатюр смещаются на нижний ряд, подробнее про свойство flex */
}
.gallery div::before {
content: "";
display: block;
padding-top: 100px;
}
.gallery div:nth-of-type(1)::before {
padding-top: 56.25%;
}
.gallery iframe,
.gallery span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.gallery a { /* для разнообразия, иконки не затемнены, так проще оценить код галереи видео */
display: inline-block;
margin-top: 5px;
}
.gallery a:last-child {
margin-bottom: 5px;
}
.gallery iframe,
.gallery img {
max-width: 100%;
vertical-align: middle;
}
</style>
<div class="gallery">
<div>
<iframe src="//www.youtube.com/embed/1TYl3jhfEDA?rel=0" allowfullscreen frameborder="0" name="tab"></iframe>
</div>
<div>
<span>
<a href="//www.youtube.com/embed/1TYl3jhfEDA?rel=0&autoplay=1" target="tab"><img src="//img.youtube.com/vi/1TYl3jhfEDA/default.jpg"></a>
<a href="//www.youtube.com/embed/xFa2_PVMeDQ?rel=0&autoplay=1" target="tab"><img src="//img.youtube.com/vi/xFa2_PVMeDQ/default.jpg"></a>
<a href="//www.youtube.com/embed/hSrOpTYKNMw?rel=0&autoplay=1" target="tab"><img src="//img.youtube.com/vi/hSrOpTYKNMw/default.jpg"></a>
<a href="//www.youtube.com/embed/WFhzzJjRncI?rel=0&autoplay=1" target="tab"><img src="//img.youtube.com/vi/WFhzzJjRncI/default.jpg"></a>
</span>
</div>
</div>
