css flex keep iframe with the proper aspect ratio

3
votes

In a simple app I have an embedded video; the image ratio is 630/315 :

    ...
    .flex-x{
         display:flex;
         flex-direction:row;   
         height:200px;
    }
    .flex-x iframe{
         display: 1 1 auto;
    }
    ...

    <div class="flex-x">
       <iframe width="560" height="315" src="..." />
    <div>

The issue is the iframe grows and shrink as expected, but only one axis, without keeping the aspect ratio.

Any method to grow/shring x and y, keeping the aspect ratio? Using padding-bottom: 56.25%; (315/560) fix when 'width' is reduced below the required to keep the ratio.

Padding is OK width or height, but only one, so to limit max-width is not a good option.

Looks like flex only changes in one flex-direction (row or col).

1
htmlcssiframeflexbox
it should work , mind to reset height to auto, to close prperly your tags (iframe) and to use an element (like pseudo to set an height according to your ratio example : codepen.io/anon/pen/RagJjg now your question is very short and if a single iframe , then flex might not be really required ... – G-Cyrillus
This is the simplified version: page is quite complex with menu and a few other stuff. Is and must be 100% html5 compliant. Thanks. – fcm
No idea why you got downvoted, seems like my previous comment didn't seems usefull so i guess there where other reasons. note: nobody voted to close your question. Still, i believe it was a bit too much generic :) However you got an answer – G-Cyrillus

1 Answers

6
votes

Responsive iframe:

Overlay an image with your iframe and it will resize just like the image...

JSFiddle

HMTL:

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://placehold.it/16x9" />
    <iframe src="https://www.youtube.com/embed/5MgBikgcWnY" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

CSS:

.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%;
}