<main>
  
  <div style="--aspect-ratio:16/9;">

    <iframe width="560" height="315" src="https://www.youtube.com/embed/2N_sUmpjzZk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

  </div>
  
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et enim ad architecto dignissimos porro, accusantium, fugit quidem ipsum suscipit neque culpa sapiente commodi vero minus labore fugiat. Culpa, minima eligendi!</p>
  
</main>

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



main {
  max-width: 500px;
  margin: 1rem auto;
  overflow: hidden;
  resize: both;
  padding: 2rem;
  background: #eee;
}