Max-Height in responsive iframe CSS ineffective though Max-Width effective.

[alxfyv]

I’ve been working on the HTML and CSS for responsive iframes. The solution I have is derived from the article How To Make Responsive Iframes – It’s Easy!, the article Making Embedded Content Work In Responsive Design and the Stack Overflow thread Scaling Iframes For Responsive Design CSS Only.

The CSS uses max-width and max-height to constrain the iframe. The trouble is that in my instance max-height is ineffective though max-width is effective. I can’t see why.

See the Pen Responsive Iframe by Steve Alexander ( @alxfyv) on CodePen.

Any insight will be much appreciated.

[Shikkediel]

Not very clear what the issue or ‘effective’ is exactly… maybe you could show a demo with your code? Generally though, I suspect it relates to this tricky bit in the padding specification :

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

http://www.w3.org/TR/REC-CSS2/box.html

[alxfyv]

By “effective/ineffective” I meant that adjusting max-width worked to adjust the width of the iframe but adjusting max-height did not work to adjust the height. The height stayed at the value calculated by padding-bottom irrespective of the max-height value.

My markup structure was

<div>
  <iframe></iframe>
</div>

and I was applying both the padding-bottom h:w aspect ratio and the max-height constraint to the <div>. The former was prevailing over the latter, contrary to my expectation.

I’ve discovered that the trick is to make the markup

<div>
  <div>
    <iframe></iframe>
  </div>
</div>

and to apply padding-bottom to the inner <div> and max-height (and max-width) to the outer <div> along with overflow: hidden.

With that markup and CSS in place, the iframe maintains its h:w aspect ratio yet is constrained in height to the max-height specification and the whole thing is responsive.

At least I think that’s what’s going on.

I edited the Pen to conform to these specs and things work there as expected. I made a /test-iframe page on my website and everything checks out there, with the exception that when the iframe src is a responsive parallax site, the iframe is nonetheless nonresponsive. But that’s another question. (Is there fully responsive iframe code that will successfully embed a parallax site?)

[Author]

Posts