Responsive Iframe

index.html

<div style="--aspect-ratio: 16/9;">
  <iframe 
    src="https://nativelore.org"
    width="1600"
    height="900"
    frameborder="0"
  >
  </iframe>
</div>

responsive-iframe.markdown

Responsive Iframe

A Pen by Stan Williams on CodePen.

License.

style.css

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}

Demo or fork: https://codepen.io/Stanssongs/pen/ExadBKG