css flex keep iframe with the proper aspect ratio

Question

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).

Answer 1

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