Responsive iframe with max width and height

Question

I have a fixed height container containing both images and iframes. To make the images responsive and preventing both vertical and horizontal overflow I can just set the following CSS:

img {
    max-width: 100%;
    max-height: 100%;
}

This ensures that a portrait image would not overflow vertically and a landscape image would not overflow horizontally.

For iframes, I'm using the "padding-ratio" technique, setting the padding of the wrapper element to the aspect ratio of the iframe (e.g. 56.25% for a 16:9 video):

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

While this means that the iframe scales with the width of the viewport it does not work the same if I change the height of the viewport. Essentially I'd like the iframe to mimic how the images work.

Solution 1

For my uses (embedding videos from Vimeo on a responsive site), this works great in the browsers I've tested in:

@media screen and (max-width: 750px) {
    iframe {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

It doesn't require image placeholders, so it's a lot simpler.

Solution 2

This code did the trick for me:

<div class="video-container"><iframe.......></iframe></div>
.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Source: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

Solution 3

Here is the fix that I feel that it might work for you but you have to compromise for "padding ratio" techniqe because that's not needed ;)

HTML as follows:

<div class="embeded-video">
      <img class="ratio-img" src="http://placehold.it/16x9" alt="16:9 Image" />
      <iframe src="//www.youtube.com/embed/I_dN9IpmOZU" frameborder="0" allowfullscreen align="center"></iframe>
    </div>

CSS as follows:

.embeded-video {
    position: relative
}
.embeded-video .ratio-img {
    display: block;
    width: 100% !important;
    height: auto !important;
}
.embeded-video IFRAME {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Demo: http://codepen.io/anon/pen/MYbqgp?editors=110

Solution 4

I'm not sure if it's possible to allow the height to grow only up to a max-height, but it is possible to constrain the height and still preserve the aspect ratio. Here's the clever technique that makes it work...I didn't write this code but I used it and it seems to work quite well:

https://codepen.io/shshaw/pen/uzlfh

Copying and pasting the (slightly modified) code here for posterity... (My main modification is using vh units instead of a percentage.)

/* Adapted from https://codepen.io/shshaw/pen/uzlfh - thanks Shaw! */
.responsive-embed {
  height: 45vh; /* Set height here */
  display: inline-block; /* Must be inline-block */
  position: relative; /* Keep the child element contained */
  /* min/max-width will break the aspect ratio, but otherwise work as expected */
  /*
  min-height: 200px;
  max-height: 400px;
  */
}
.responsive-embed .ratio {
  height: 100%; /* Our ratio canvas is expanded to as tall as the height set above. */
  width: auto; /* Allows the width to adjust based in the height, keeping the aspect ratio */
  visibility: hidden; /* Prevents non-transparent image or alt text from showing up */
  text-align: left;
}
.responsive-embed iframe {
  /* Force the child block to be same size as parent */
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

<div class="responsive-embed">
  <img class="ratio" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAAAAAAeQfPuAAAAC0lEQVQYGWMYrAAAAJkAAWzZLOIAAAAASUVORK5CIIA=" alt="16x9">
  <iframe src="https://player.vimeo.com/video/20732587/?api=0&portrait=0&autoplay=0&color=21abb9" width="100%" height="100%" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

View more solutions

Comments

[MEM]

I'm trying to accomplish almost the same, however I don't have a fixed height. I have images and iframes, and I wish the iframes to mimify what max-width does to images. Have you found your solution in the meanwhile?

[Mikko Rantalainen]

That demo overflows the viewport if viewport is "too short" (or viewport is too wide).

[Alexander Gorg]

That's pretty awesome!

[Patrick]

This has various issues if you don't want the video to be 100% width, but e.g. 50%

[MadeByDouglas]

Am I missing something? this does not work for me. iframe does not remain 100% width as you would expect like an image or video tag does