It’s not as easy as you might think, so I thought I’d share the logic and how to do it for two aspect ratios, one for desktop and one for mobile.
.aspect-16-9{
iframe{
width: 100%;
height: 100%;
min-width: 100vh * 16;
min-height: calc((100vw / 16) * 9);
}
.aspect-9-16{
iframe{
width: 100%;
height: 100%;
min-height: 100vw * 16;
min-width: calc((100vh / 16) * 9);
}
