<div class="video-section">
<figure class="video-section__frame">
<iframe class="iframe-video" src="https://www.youtube.com/embed/7EQ4KrPJod0" frameborder="0" allowfullscreen>
</iframe>
</figure>
</div>
<div class="video-section">
<figure class="video-section__frame">
<iframe class="iframe-video" src="https://www.youtube.com/embed/7EQ4KrPJod0" frameborder="0" allowfullscreen>
</iframe>
</figure>
</div>
/* No context defined for this component. */
.video-section {
// margin-top: -6rem;
}
.video-section__frame {
--n: 9;
--d: 16;
padding-bottom: calc(var(--n) / var(--d) * 100%);
position: relative;
box-shadow: 8px 8px 32px hsla(var(--black-hsl), .3);
}
.video-section__frame > * {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.video-section__frame > img,
.video-section__frame > video,
.video-section__frame > iframe, {
width: 100%;
height: 100%;
object-fit: cover;
}
There are no notes for this item.