How to keep the proportional when max-width is given-CodePudding

I have youtube embed

<iframe id="you" style="max-width:100%;" width="672" height="378" src="https://www.youtube.com/embed/rMCILWXXXXX">

I set max-width:100%; for mobile phone.

When screen size is under 672, iframe is made to be smaller.

However height doesn't , even I set height="auto" it doesn't keep proportional.

How can I do this??

I can not do this with only css??

I need to use jquery or something to keep ratio?

CodePudding user response：

You can use the property aspect-ratio

iframe{
  aspect-ratio: 16 / 9;
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

CodePudding user response：

I usually add a wrapper around the iframe and set the height and width of the wrapper to 100%. Then you can give the iframe a max-width and max-height of 100%.

I also removed margin from the body and border from the iframe to make to prevent a scrollbar from appearing.

html, body {
  height: 100%;
  margin: 0;
}

div.wrapper {
  width: 100%;
  height: 100%;
}

iframe#you {
  max-width: 100%;
  max-height: 100%;
  border: unset;
}

<div class="wrapper">
  <iframe id="you" width="672" height="400" src="https://www.youtube.com/embed/rMCILWXXXXX"></iframe>
</div>