_content-media.scss
@use "../abstracts/" as *;
// .content-player.content-player {
audio { max-width: 100%; } video { width: min(100%, 60rem); height: auto; }}
// .content-youtube + .content-vimeo responsive.content-youtube,.content-vimeo {
// define margin-block-end (mind the figcaption) margin-block-end: 3rem;
figure.aspect { position: relative; width: min(100%, 60rem); // limit the player width to 60rem height: auto; &.aspect--16\:9 { aspect-ratio: 16 / 9; } &.aspect--16\:10 { aspect-ratio: 16 / 10; } &.aspect--21\:9 { aspect-ratio: 21 / 9; } &.aspect--4\:3 { aspect-ratio: 4 / 3; } &.aspect--2\:3 { aspect-ratio: 2 / 3; } iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid $color-neutral-200; background-color: $color-neutral-100; } figcaption { margin-block-start: unset; position: absolute; left: 0.25rem; bottom: -1.5rem; contain: unset; } }}- ISP: margin-block-end auskommentiert