Reframe.js – Responsive iFrames
github.com
Reframe.js – Responsive iFrames
1–10 of 18 posts
Re: Reframe.js – Responsive iFrames
#2I wonder how effective this is and whether or not it's been used across multiple sites? It seem's like it could be useful, but also, it looks "dangerous"?
Re: Reframe.js – Responsive iFrames
#3I wonder how effective this is and whether or not it's been used across multiple sites? It seem's like it could be useful, but also, it looks "dangerous"?
What exactly is "dangerous" about this? The functionality is pretty straightforward - it just creates a parent element of the correct width/height around an element that dictates the original elements height, and then resizes the inside one proportionately as needed for responsiveness (using CSS only).
Re: Reframe.js – Responsive iFrames
#4Codepen demo linked from the github page:
Re: Reframe.js – Responsive iFrames
#5I wonder how effective this is and whether or not it's been used across multiple sites? It seem's like it could be useful, but also, it looks "dangerous"?
What exactly is "dangerous" about this? The functionality is pretty straightforward - it just creates a parent element of the correct width/height around an element that dictates the original elements height, and then resizes the inside one proportionately as needed for responsiveness (using CSS only).
"Dangerous" was the wrong word, and I should have expanded further. Also, it appears as though my use case isn't specifically for what this is designed, so I take that back. I'm thinking of the case in which this may be useful to modify older complex sites where chosen selectors might cause unexpected results. Apologies.
Re: Reframe.js – Responsive iFrames
#6Just a heads up that it kind of name collides with re-frame which is a frontend clojurescript library.
Re: Reframe.js – Responsive iFrames
#7Earlier quoted context omitted.
What exactly is "dangerous" about this? The functionality is pretty straightforward - it just creates a parent element of the correct width/height around an element that dictates the original elements height, and then resizes the inside one proportionately as needed for responsiveness (using CSS only).
"Dangerous" was the wrong word, and I should have expanded further. Also, it appears as though my use case isn't specifically for what this is designed, so I take that back. I'm thinking of the case in which this may be useful to modify older complex sites where chosen selectors might cause unexpected results. Apologies.
What is your use case?
Re: Reframe.js – Responsive iFrames
#8This is a nice use of intrinsic ratio, but it's not a what I would call a "responsive iFrame",you can achieve this by just putting your iFrame in an intrinsic ratio container and laying it out with CSS. The only method I know to make an iframe respond to contain its child element (which might change size, or load slowly) is with a resize listener on the child and postMessage.
Re: Reframe.js – Responsive iFrames
#9This is a nice use of intrinsic ratio, but it's not a what I would call a "responsive iFrame",you can achieve this by just putting your iFrame in an intrinsic ratio container and laying it out with CSS. The only method I know to make an iframe respond to contain its child element (which might change size, or load slowly) is with a resize listener on the child and postMessage.
Technically, the iFrame itself is not responsive but that is what the library does: it wraps it in a container that has more responsive properties than the iFrame.
In addition, I think you may be overloading the word "responsive." This is not a post-message base iFrame resizer, it makes iFrames scale like images. This maintains an aspect ratio which is very desirable in many cases. Think a YouTube embed.
Re: Reframe.js – Responsive iFrames
#10This is a nice use of intrinsic ratio, but it's not a what I would call a "responsive iFrame",you can achieve this by just putting your iFrame in an intrinsic ratio container and laying it out with CSS. The only method I know to make an iframe respond to contain its child element (which might change size, or load slowly) is with a resize listener on the child and postMessage.
I guess the best way to think about it is that when you omit the height on an image, it will scale when you define its width. iFrames don't do that by default, but this allows them to be scaled.