
Reframe.js – Responsive iFrames - jakiestfu
https://github.com/dollarshaveclub/reframe.js
======
aplummer
This 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.

~~~
jakiestfu
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.

------
hughes
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.

~~~
BinaryIdiot
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.

------
BWStearns
Just a heads up that it kind of name collides with re-frame which is a
frontend clojurescript library.

~~~
dvcrn
I immediately thought this was a re-frame port to vanilla JavaScript

------
degenerate
Codepen demo linked from the github page:

[http://codepen.io/yowainwright/pen/amzAEo](http://codepen.io/yowainwright/pen/amzAEo)

------
thoughtpalette
Isn't this what fitvids.js does? Forgive my arrogance.

[http://fitvidsjs.com/](http://fitvidsjs.com/)

~~~
appleflaxen
the post addresses this, and gives credit under the "Why?" section.

short version: it's meant to be smaller / avoid a jQuery dependency.

------
johnhenry
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"?

~~~
ecaroth
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).

~~~
johnhenry
"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.

~~~
yowainwright
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~.

