How to maintain an aspect ratio of iframe

Question

I have an iframe with the following css:

.preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;

    max-width: 1280px;
    max-height: 720px;
    margin: auto;
}

It lives inside a container with the following CSS:

.wrapper {
   position: absolute;
   width: calc(100% - 440px);
   height: 0;
   left: 0;
   top: 0;
   bottom: 0;
   text-align: center;
   background: #1c1c1c;
   display: flex;
   padding-bottom: 56.25%;
}

the wrapper lives inside a div with

position: fixed

I'm trying to maintain an aspect ratio of 16:9 for the iframe as the window resizes, but the above is not working. What should I do?

Answer 1

This is now possible with the new aspect-ratio CSS property:

.element {
  width: 100px;
  aspect-ratio: 2 / 1;
  /* height will automatically be set to 50px */
}

More info here: https://css-tricks.com/almanac/properties/a/aspect-ratio/

It's available in all modern browsers.