3 Responsive YouTube IFrame CSS Styling Methods

The Padding-Top Method

The Aspect-Ratio Method

Love at first sight
iframe {
aspect-ratio: 16/9;
width: 100%;
max-width: 700px;
}
Aspect-ratio CSS property still only supported in Edge and Chrome

The Viewport Units Method

Pen-and-paper role-playing gamer is a fan of this method.
iframe {
width: calc(100vw - 30px);
height: calc((100vw - 30px) * .5625);
max-width: 700px;
max-height: calc(700px * .5625);
}

Wrap Up

Front-end Web Developer. Language lover. Traveler. Dude.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store