Responsive Video Iframes (Keeping Aspect Ratio) with Only CSS

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

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)

How Do I Make Sure An iFrame's Aspect Ratio Is Responsive?

You really don't need media query to achieve this but if you want, you can shift it inside media query. So, how is it being achieved?

Since, we know we need the aspect ratio of 16:9 and the width should not exceed 90vw, thus the height should also not exceed 50.85vw. And we set the max-height and max-width according to your absolute dimension limits that is 600px and 338 px of the container.
Now, setting the iframe dimensions to the 100% of the container, it inherits that dimensions. :)

.tv-wrapper {  max-width:600px;  max-height:338px;  width:90vw;  height:50.85vw;  margin:0 auto;}iframe {  width:100%;  height:100%;}

<div class="container">      <div class="tv-wrapper">          <iframe class="sproutvideo-player" src="//videos.sproutvideo.com/embed/489adcb51e1debcdc0/e0d9daac7a1a9b30?bigPlayButton=false&showControls=false" frameborder="0" allowfullscreen="allowfullscreen"></iframe>          </div>    </div>

css flex keep iframe with the proper aspect ratio

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

Scaling iframes for responsive design CSS-only

The solution was nested divs. A little hackey, I know, but it's a really easy solution to a problem that had too many solutions. Youtube videos keep an aspect ratio of 16:9 in this example. Your HTML should look like this:

<div id="outer">
    <div id="inner">
        <iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
</div>

And your stylesheet:

#outer{
max-width: 640px;
max-height: 360px;
width: 100%;
height: 100%;
}

#inner{
    height: 0px;
    padding-bottom: 56.25%;
}

#inner iframe{
    width: 100%;
    height: 100%;
}

The outer div sets the maximum height and width and allows itself to scale, while the inner div uses the padding attribute to match its height to the width of the containing div (I'm pretty sure). The value should be set at (height*100/width)%, the ratio of the height to the width. The iframe then stretches to fill the whole containing div. Whitespace fills on web, so you should be just fine putting text underneath.

I can't remember exactly where I found it. It was done with images somewhere else on Stack Overflow, but I think it's relevant to have it set up to work for iframes since embedded Youtube videos are so common.

Here's a JSfiddle with the working thing.

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

---

Related Topics