Как правильно сверстать такие элементы?

Question

[unlik]

Учусь только верстке, Попался такой элемент. Видео и рядом с ним кружки.

Вот как правильно добавить эти кружки, что бы было адаптивно?

Answer 1

[Андрей Саврасов]

Можно сделать на :before и :after

Значения подравнять под ваши отступы и размеры. На глаз писал.

<div class="mapWrap">
<video>
</div>

.mapWrap{
position: relative;
}

.mapWrap:before
{
content: "";
display: block;
width: 100px;
height: 100px;
background: url(round1.png) center center no-repeat;
position: absolute;
left: -100px;
top: 50%;
z-index: 1;
}


.mapWrap:after
{
content: "";
display: block;
width: 200px;
height: 200px;
background: url(round2.png) center center no-repeat;
position: absolute;
right: -100px;
bottom: -100px;
z-index: 1;
}

.mapWrap video
{
z-index: 2;
position: relative;
}

Answer 2

[Иван Дмитриев]

<style>
.wrapper{
    background-image : url('ball.png');
    background-size: contain;
}
.video_block{
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
<div class="wrapper">
    <div class="video_block">
        <span class="play"></span>
    </div>
</div>

Comments

[unlik]

Спасибо большое))
Теперь осталось поломать голову над тем, как плеер ютуба так стилизовать.

[Иван Дмитриев]

unlik, https://developers.google.com/youtube/v3/ Покурите мануалы , если мне память не изменяет , то там не все просто но вполне реально ) Удачи)