Scale iFrame css width 100 like an image

Question

I want to scale an iFrame through CSS to width  100   and the height should scale proportionally to the width   With an  lt img gt  tag this works fine   Both the image and the iFrame have defined width and height in the html   Here some examples    lt html gt       lt style gt           a  width  500px            img  width  100   height  auto        lt  style gt       lt body gt           lt div id  a  gt               lt img src  http   lorempixel com 200 150   width  200  height  150    gt           lt  div gt       lt  body gt    This works great on images  but I would like the same behaviour for iFrames    lt html gt       lt style gt           a  width  900px  background  grey           iframe  width  100   height  auto        lt  style gt       lt body gt           lt div id  a  gt               lt iframe width  560  height  315  src  http   www youtube com embed RksyMaJiD8Y  frameborder  0  allowfullscreen gt  lt  iframe gt           lt  div gt       lt  body gt    The iFrame renders 100  wide but does not scale it s height proportional like the image does

User · Answer

You could use viewport units here instead of %. Like this:

iframe {
    max-width: 100vw;
    max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}

DEMO (Resize to see the effect)

_x000D_

body {_x000D_
  margin: 0;_x000D_
}_x000D_
.a {_x000D_
  max-width: 560px;_x000D_
  background: grey;_x000D_
}_x000D_
img {_x000D_
  width: 100%;_x000D_
  height: auto_x000D_
}_x000D_
iframe {_x000D_
  max-width: 100vw;_x000D_
  max-height: 56.25vw;_x000D_
  /* 315/560 = .5625 */_x000D_
}

_x000D_

<div class="a">_x000D_
  <img src="http://lorempixel.com/560/315/" width="560" height="315" />_x000D_
</div>_x000D_
_x000D_
<div class="a">_x000D_
  <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>_x000D_
</div>

_x000D_

User · Answer

Big difference between an image and an iframe is the fact that an image keeps its aspect-ratio  You could combine an image and an iframe with will result in a responsive iframe  Hope this answerers your question   Check this link for example   http   jsfiddle net Masau 7WRHM   HTML    lt div class  wrapper  gt       lt div class  h iframe  gt           lt  -- a transparent image is preferable -- gt           lt img class  ratio  src  http   placehold it 16x9   gt           lt iframe src  http   www youtube com embed WsFWhL4Y84Y  frameborder  0  allowfullscreen gt  lt  iframe gt       lt  div gt       lt p gt Please scale the  result  window to notice the effect  lt  p gt   lt  div gt    CSS   html body         height 100     wrapper          width 80  height 100  margin 0 auto background  CCC   h iframe         position relative    h iframe  ratio  display block width 100  height auto    h iframe iframe  position absolute top 0 left 0 width 100   height 100      note  This only works with a fixed aspect-ratio

User · Answer

Anachronist is closest here   Simone not far off  The caveat with percentage padding on an element is that it s based on its parent s width  so if different to your container  the proportions will be off   The most reliable  simplest answer is    x000D   x000D  body   x000D       for demo    x000D    background  lightgray  x000D    x000D   fixed-aspect-wrapper   x000D       anything or nothing  it doesn t matter    x000D    width  60   x000D       only need if other rulesets give this padding    x000D    padding  0  x000D    x000D   fixed-aspect-padder   x000D    height  0  x000D       last padding dimension is  100   height   width  of item to be scaled    x000D    padding  0 0 56 25   x000D    position  relative  x000D       only need next 2 rules if other rulesets change these    x000D    margin  0  x000D    width  auto  x000D    x000D   whatever-needs-the-fixed-aspect   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    width  100   x000D    height  100   x000D       for demo    x000D    border  0  x000D    background  white  x000D    x000D   lt div class  fixed-aspect-wrapper  gt  x000D     lt div class  fixed-aspect-padder  gt  x000D       lt iframe class  whatever-needs-the-fixed-aspect  src     gt  lt  iframe gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

None of these solutions worked for me inside a Weebly  add your own html  box   Not sure what they are doing with their code   But I found this solution at https   benmarshall me responsive-iframes    and it works perfectly     CSS   iframe-container     overflow  hidden    padding-top  56 25     position  relative      iframe-container iframe      border  0     height  100      left  0     position  absolute     top  0     width  100         4x3 Aspect Ratio     iframe-container-4x3     padding-top  75       HTML   lt div class  iframe-container  gt     lt iframe src  https   player vimeo com video 106466360  allowfullscreen gt  lt  iframe gt   lt  div gt

User · Answer

I like this solution best  Simple  scalable  responsive  The idea here is to create a zero-height outer div with bottom padding set to the aspect ratio of the video  The iframe is scaled to 100  in both width and height  completely filling the outer container  The outer container automatically adjusts its height according to its width  and the iframe inside adjusts itself accordingly    lt div style  position relative  width 100   height 0px  padding-bottom 56 25    gt       lt iframe style  position absolute  left 0  top 0  width 100   height 100           src  http   www youtube com embed RksyMaJiD8Y  gt       lt  iframe gt   lt  div gt    The only variable here is the padding-bottom value in the outer div  It s 75  for 4 3 aspect ratio videos  and 56 25  for widescreen 16 9 aspect ratio videos

User · Answer

I suppose this is a cleaner approach  It works with inline height and width properties  I set random value in the fiddle to prove that  and with CSS max-width property  HTML   lt div class  quot wrapper quot  gt       lt div class  quot h iframe quot  gt           lt iframe height  quot 2 quot  width  quot 2 quot  src  quot http   www youtube com embed WsFWhL4Y84Y quot  frameborder  quot 0 quot  allowfullscreen gt  lt  iframe gt       lt  div gt       lt p gt Please scale the  quot result quot  window to notice the effect  lt  p gt   lt  div gt   CSS  html body         height  100     wrapper          width  80   max-width  600px  height  100   margin  0 auto  background   CCC   h iframe         position  relative  padding-top  56     h iframe iframe  position  absolute  top  0  left  0  width  100   height  100     http   jsfiddle net 7WRHM 1001

[css] Scale iFrame css width 100% like an image

DEMO (Resize to see the effect)

Examples related to css

Examples related to iframe

Examples related to responsive-design