Skip to content
πŸ–Ό Reframe unresponsive elements responsively.
JavaScript HTML
Branch: master
Clone or download
greenkeeper and yowainwright Update husky to the latest version πŸš€ (#188)
* chore(package): update husky to version 4.0.2

* chore(package): update lockfile yarn.lock
Latest commit 230cde3 Jan 9, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci [init] adds circleci; removes travis (#102) Apr 17, 2018
dist Undefined bug fix (#186) Jan 6, 2020
src Undefined bug fix (#186) Jan 6, 2020
.babelrc Greenkeeper/rollup plugin babel 4.0.1 (#117) Aug 28, 2018
.editorconfig updates setup completely Sep 4, 2016
.gitignore Undefined bug fix (#186) Jan 6, 2020
.nvmrc fix(no-width): fixes no-width/height issue (#179) Nov 8, 2019
.travis.yml [update] removes bower deps (#91) Feb 20, 2018 [chore] updates changelog (#187) Jan 6, 2020
LICENSE updates `node version` in `travis config` May 15, 2017 [update] adds unpkg badge (#119) Sep 8, 2018
gulpfile.js Update gulp to the latest version πŸš€ (#136) Dec 10, 2018
package.json Update husky to the latest version πŸš€ (#188) Jan 9, 2020
yarn.lock Update husky to the latest version πŸš€ (#188) Jan 9, 2020

Reframe.js, reframe your content responsively

npm version 0.3.6 unpkg Greenkeeper Build Status Share

πŸ–Ό Reframe.js

Reframe.js is a javascript plugin that makes elements scale at a fixed ratio.

This is particularly awesome for making embedded stuff, like videos or playlists, scale appropriately within a content area. This can done by hand but it's difficult to maintain, especially with CMS's and multiple editors. Reframe.js solves this issueβ€”perfectly!

Alternatively, noframe.js is provided. Noframe.js scales selected elements at a fixed ratio but does not manipulate the dom's element structure at all! This keeps things like analytic events that run on embedded content intact!



npm i reframe.js --save


yarn add reframe.js


  1. Add dist/reframe.js
  2. reframe the element you'd like to re-frame.


reframe('iframe'); // Wrap all iFrames in the page
reframe(document.getElementById('my-frame')); // Pass a DOM element
reframe(document.querySelectorAll('.my-targets')) // Pass a live node list

Elements that have been wrapped with reframe will not be wrapped twice.


Reframe.js wraps a specified element in a div that is an intrinsic ratio of the original element. This plugin is great for embedded content like iframes or videos.

Why Reframe.js?

Reframe.js is inspired by FitVids and does what FitVids does but without the need for jQuery. This makes the plugin highly valuable when including it in a module that has to be very small and with minimal dependencies. Here's a basic codepen example.

This plugin is small - ~1.3kb unminified and is meant to do 1 thing - wrap elements that aren't responsive and make them responsive. πŸ’ͺ


If you'd like to not use the classname 'js-reframe', just use your own.

reframe('iframe', 'my-classname');


Reframe.js works with jQuery or Zepto. As of version 2.0.0, use jquery.reframe.js for jQuery or Zepto.


// While using a custom class name

🌐 Noframe.js

Noframe.js makes the same ratio as Reframe.js using css calc.

Noframe.js's doesn't wrap the element you'd like to be responsive. It, instead, does a calculation based on its or a parent element's max-width. Here's a basic codepen example.

Noframe.js Notes

  • The reframed element requires a parent element with a max width to scale above the selected elements intial size otherwise the reframed element will only scale below its initial size. πŸ‘


  1. Add dist/noframe.js
  2. noframe the element you'd like to re-frame.


noframe('iframe', 'parent');


Noframe.js works with jQuery or Zepto. As of version 2.0.0, use jquery.noframe.js for jQuery or Zepto.


Reframe.js or Noframe.js?

Reframe.js offers the simplest solution to making elements scale at an intrinsic ratio.

Noframe.js doesn't wrap the selected element to make it scale at an intrinsic ratio. Noframe.js is the ideal solution when various events, like tracking events, could be affected when an element is wrapped. It does require a width or max-width which can involve a bit more setup awareness.

Created and maintained by Jeff Wainwright with Dollar Shave Club Engineering.

You can’t perform that action at this time.