0

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?

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
whitebear
  • 11,200
  • 24
  • 114
  • 237

2 Answers2

4

You can use the property aspect-ratio

iframe{
  aspect-ratio: 16 / 9;
}

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

YourBrainEatsYou
  • 979
  • 6
  • 16
0

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>
Mark West
  • 39
  • 4