Responsive video iframes (keeping aspect ratio) with only CSS?

Question

I usually use a similar solution to this one. Something like:

.wrapper {    position: relative;    width: 100%;    height: 0;    padding-bottom: 56.25%; } .wrapper iframe {    position:absolute;    left: 0;    top: 0;    height: 100%;    width: 100%; } 

But this time I have no access to the HTML or JavaScript code so I can't use a wrapper to prevent the height:0.

Is there a way to make an iframe responsive (and to keep the ratio) with only CSS?

Tried this (works with the iframe but not with its content):

iframe {     width: 100%;     background: red;     height: 0;     padding-bottom: 33%;     } 

fiddle

Any thoughts? No need to support old browsers so even a CSS3 solution would be great.

Answer 1

Here is a Fiddle for a solution, that is based on a CSS2 secret: https://jsfiddle.net/59f9uc5e/2/

<div class="aspect-ratio">   <iframe src="" width="550" height="275" frameborder="0"></iframe> </div>  <style> /* This element defines the size the iframe will take.    In this example we want to have a ratio of 25:14 */ .aspect-ratio {   position: relative;   width: 100%;   height: 0;   padding-bottom: 56.25%; /* The height of the item will now be 56.25% of the width. */ }  /* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */ .aspect-ratio iframe {   position: absolute;   width: 100%;   height: 100%;   left: 0;   top: 0; } </style> 

It is explained by how percentage-values for padding are handled:

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

https://www.w3.org/TR/CSS2/box.html#padding-properties

Answer 2

Use the new CSS viewport units vw and vh (viewport width / viewport height)

FIDDLE

iframe {     width: 100vw;      height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */     background:red;   } 

Browser support is also good: IE9+ (caniuse)