Klar geht das. Ich orientiere mich da gerne an Bootstrap:
https://getbootstrap.com/docs/5.3/helpers/ratio/
HTML:
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube-nocookie.com/embed/Uz8funYgeSg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
CSS (Variante 1):
.ratio {
position: relative;
}
.ratio-16x9 {
--bs-aspect-ratio: 56.25%;
}
.ratio::before {
display: block;
padding-top: var(--bs-aspect-ratio);
content: "";
}
.ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Noch etwas einfacher würde es gehen, wenn du die etwas neuere CSS-Eigenschaft aspect-ratio benutzt.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
CSS (Variante 2):
.ratio {
position: relative;
}
.ratio-16x9 {
aspect-ratio: 16 / 9;
}
.ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Wenn 16:9 das einzige Seitenverhältnis ist, dass du brauchst, dann könntest du den Code weiter vereinfachen.
HTML:
<div class="video">
<iframe src="https://www.youtube-nocookie.com/embed/Uz8funYgeSg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
CSS:
.video {
position: relative;
aspect-ratio: 16 / 9;
}
.video > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}