body {
  margin: 1em auto;
  max-width: 40em;
  width: 88%;
/* The CSS aspect-ratio property tells browsers to preserve a specific aspect ratio on an element when scaling the size of it up or down. */

iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;

<iframe width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter