.studiodega-vk-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #161616;
color: #fff;
}
.studiodega-vk-embed__player,
.studiodega-vk-embed__player iframe,
.studiodega-vk-embed__play {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.studiodega-vk-embed__player iframe {
display: block;
border: 0;
}
.studiodega-vk-embed__play {
display: flex;
min-height: 44px;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
z-index: 1;
}
.studiodega-vk-embed__play[hidden],
.studiodega-vk-embed__status[hidden] {
display: none;
}
.studiodega-vk-embed__play::after {
position: absolute;
inset: 0;
content: '';
background: linear-gradient(0deg, rgba(0, 0, 0, .9), transparent 60%);
}
.studiodega-vk-embed__play:focus-visible {
outline: 3px solid #fff;
outline-offset: -6px;
}
.studiodega-vk-embed__poster {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.studiodega-vk-embed__icon {
position: absolute;
width: 64px;
height: 46px;
border-radius: 12px;
background: #07f;
z-index: 1;
}
.studiodega-vk-embed__icon::after {
position: absolute;
top: 13px;
left: 27px;
content: '';
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
}
.studiodega-vk-embed__caption,
.studiodega-vk-embed__action {
position: absolute;
left: 12px;
right: 12px;
z-index: 1;
line-height: 1.35;
color: #fff;
text-align: left;
}
.studiodega-vk-embed__caption {
bottom: 34px;
font-size: 14px;
font-weight: 600;
}
.studiodega-vk-embed__action {
bottom: 12px;
font-size: 12px;
}
.studiodega-vk-embed__status {
position: absolute;
left: 12px;
right: 12px;
top: 12px;
margin: 0;
padding: 8px;
background: rgba(0, 0, 0, .8);
color: #fff;
z-index: 2;
}
@media (min-width: 768px) {
.studiodega-vk-embed__caption,
.studiodega-vk-embed__action {
left: 20px;
right: 20px;
}
.studiodega-vk-embed__caption {
bottom: 40px;
font-size: 18px;
}
.studiodega-vk-embed__action {
bottom: 18px;
font-size: 14px;
}
}