<article class="article">
  <h1>Adaptive video with custom properties</h1>
  
  <iframe 
    style="--width: 560; --height: 315;"
    class="video"
    width="560" height="315" 
    src="https://www.youtube.com/embed/gdJjc6l6iII" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen></iframe>
</article>

.video {
   /* Get aspect ratio */
  --aspect-ratio: calc(var(--height) / var(--width));
  /* Add units to height */
  --height-with-units: calc(var(--height) * 1px);

  max-width: 100%;

  /* Get minimal of initial height
     or height calculated from window width */
  height: Min(calc(100vw * var(--aspect-ratio)), var(--height-with-units));
}

// Helpers

BODY {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Trebuchet MS, Arial, sans-serif;
  line-height: 1.2;
}

.article {
  max-width: 500px;
  padding: 1rem;
}

H1 {
  margin-top: 0;
  font-size: calc(1.4rem + 1vw);
}