- This topic is empty.
June 29, 2015 at 4:56 pm #204391alxfyvParticipant
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.
Any insight will be much appreciated.June 30, 2015 at 5:18 am #204404ShikkedielParticipant
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’.June 30, 2015 at 2:35 pm #204423alxfyvParticipant
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?)
- The forum ‘CSS’ is closed to new topics and replies.