Reframe.js – Responsive iFrames
github.comThis 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.
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.
Interesting to see open-source packages coming out of Dollar Shave Club. They have over 40 projects on github that have been updated within the last year.
Honestly I would be surprised to not see this keep growing. Most technology companies rely on Open Source and many are "giving back" as a way to help others how they were helped (or at the very least it's a great recruiting tool). The last start-up I worked at I worked on three different open source projects that we needed but could also help the community if they needed a similar solution.
We are a major player in Ember Fastboot. We're trying to open source more projects that have value, so it's nice to hear people notice!
Just a heads up that it kind of name collides with re-frame which is a frontend clojurescript library.
I immediately thought this was a re-frame port to vanilla JavaScript
Thanks!
Codepen demo linked from the github page:
Isn't this what fitvids.js does? Forgive my arrogance.
the post addresses this, and gives credit under the "Why?" section.
short version: it's meant to be smaller / avoid a jQuery dependency.
I 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.
Reframe.js is written the way that it is (to do 1 thing simply) to put the power back in the hands of the asset owner. This approach was chosen over trying to solve all ~all of the things~.
What is your use case?