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

[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?)