Reframe.ts compiles to a javascript plugin that makes elements scale at a fixed ratio.
\n\nThis 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!\n\nAlternatively, [noframe.js](#noframe) 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!\n\n---\n\n**Version 4**\n\n_Version 4_ was/will be released. There should be no changes required to use _Version 4_. `dist` is ignored on Github so a major version bump (for safety) felt necessary!\n\n---\n\n### Installation\n\n**NPM**\n\n```sh\nnpm i reframe.js --save\n```\n\n**Yarn**\n\n```sh\nyarn add reframe.js\n```\n\n**CDN**\n\n```html\n\n```\n\n### Setup\n\n1. Add `dist/reframe.js`\n2. `reframe` the element you'd like to re-frame.\n\n### Examples\n\n```javascript\nreframe('iframe') // Wrap all iFrames in the page\nreframe(document.getElementById('my-frame')) // Pass a DOM element\nreframe(document.querySelectorAll('.my-targets')) // Pass a live node list\n```\n\nElements that have been wrapped with reframe will not be wrapped twice.\n\n### How?\n\n**Reframe.js** wraps a specified element in a `div` that is an [intrinsic ratio](http://alistapart.com/article/creating-intrinsic-ratios-for-video) of the original element. This plugin is great for **embedded content** like `iframes` or `videos`.\n\n### Why Reframe.js?\n\n**Reframe.js** is inspired by [FitVids](https://github.com/davatron5000/FitVids.js) 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](http://codepen.io/yowainwright/pen/7f34f86e716ea93013899a71752dbff6).\n\nThis plugin is small - `~1.3kb` unminified and is meant to do 1 thing - _wrap elements that aren't responsive and make them responsive_. 💪\n\n### Options\n\nIf you'd like to not use the classname 'js-reframe', just use your own.\n\n```javascript\nreframe('iframe', 'my-classname')\n```\n\n### jQuery\n\n**Reframe.js** works with jQuery or Zepto. As of version 2.0.0, use `jquery.reframe.js` for jQuery or Zepto.\n\n```javascript\n$('iframe').reframe()\n\n// While using a custom class name\n$('iframe').reframe('my-classname')\n```\n\n\n\n
🌐 Noframe.js
\n\nNoframe.js makes the same ratio as Reframe.js using [css calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).\n\nNoframe.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](http://codepen.io/yowainwright/pen/19cd3f2fc3e00ce80e36285feae20b77).\n\n**Noframe.js Notes**\n\n- 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. 👍\n\n### Setup\n\n1. Add `dist/noframe.js`\n2. `noframe` the element you'd like to re-frame.\n\n### Examples\n\n```javascript\nnoframe('iframe')\nnoframe('iframe', 'parent')\n```\n\n### jQuery\n\n**Noframe.js** works with jQuery or Zepto. As of version 2.0.0, use `jquery.noframe.js` for jQuery or Zepto.\n\n```javascript\n$('iframe').noframe()\n$('iframe').noframe('parent')\n```\n\n## Reframe.js or Noframe.js?\n\nReframe.js offers the **simplest solution** to making elements scale at an intrinsic ratio.\n\nNoframe.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.\n\n---\n\n[Created](https://github.com/yowainwright/reframe.js) and maintained by [Jeff Wainwright](https://github.com/yowainwright) with [Dollar Shave Club Engineering](https://github.com/dollarshaveclub).\n","maintainers":[{"name":"yowainwright","email":"yowainwright@gmail.com"}],"time":{"modified":"2023-08-27T20:53:52.052Z","created":"2016-09-06T23:51:59.098Z","0.0.2":"2016-09-06T23:51:59.098Z","0.0.3":"2016-09-06T23:56:04.610Z","0.0.4":"2016-09-07T00:39:28.715Z","0.0.5":"2016-09-07T00:53:01.526Z","0.0.6":"2016-09-07T01:02:49.956Z","0.0.7":"2016-09-07T01:08:25.732Z","0.0.8":"2016-09-07T01:09:12.623Z","0.0.9":"2016-09-07T01:10:40.498Z","0.1.0":"2016-09-07T01:18:18.351Z","0.1.1":"2016-09-07T01:19:06.609Z","0.1.2":"2016-09-07T01:20:14.037Z","0.1.3":"2016-09-07T03:33:02.229Z","0.1.4":"2016-09-07T05:52:06.061Z","0.1.5":"2016-09-08T07:47:12.758Z","0.1.6":"2016-09-08T23:51:47.653Z","0.1.7":"2016-09-09T01:52:04.076Z","0.1.8":"2016-09-09T03:22:36.301Z","0.1.9":"2016-09-09T17:28:45.506Z","0.2.0":"2016-09-13T04:05:41.614Z","0.2.1":"2016-09-13T18:26:04.900Z","0.2.2":"2016-09-13T21:06:09.839Z","0.2.3":"2016-09-14T00:38:35.477Z","0.2.4":"2016-09-14T18:08:23.276Z","0.2.5":"2016-09-14T23:02:51.224Z","0.2.6":"2016-09-14T23:03:23.127Z","0.2.7":"2016-09-15T01:08:16.185Z","0.2.8":"2016-09-15T01:43:27.424Z","0.2.9":"2016-09-16T01:37:39.109Z","0.3.0":"2016-09-17T06:43:50.215Z","0.3.1":"2016-09-23T03:58:46.475Z","0.3.2":"2016-10-14T07:08:37.527Z","0.3.3":"2016-10-17T17:46:02.983Z","0.3.4":"2016-10-26T22:23:28.622Z","0.3.5":"2016-11-01T04:56:34.825Z","0.3.6":"2016-11-06T23:35:10.014Z","0.3.7":"2016-11-08T06:33:47.084Z","0.3.8":"2016-12-14T06:13:55.019Z","1.0.0":"2017-01-02T23:19:57.623Z","1.0.1":"2017-01-23T00:20:56.841Z","1.0.2":"2017-03-07T06:36:50.796Z","1.0.3":"2017-03-29T21:44:50.477Z","1.0.4":"2017-04-06T06:53:08.703Z","2.1.0":"2017-05-17T23:23:55.948Z","2.1.1":"2017-05-18T02:49:10.814Z","2.1.3":"2017-05-22T18:35:41.959Z","2.1.6":"2017-07-09T20:35:12.973Z","2.1.9":"2017-07-17T03:55:58.692Z","2.1.12":"2017-08-09T18:16:31.794Z","2.1.13":"2017-08-31T03:27:47.680Z","2.1.14":"2017-10-20T02:59:58.129Z","2.1.18":"2018-01-07T04:49:12.426Z","2.1.21":"2018-02-20T03:48:58.988Z","2.1.22":"2018-03-15T16:47:41.093Z","2.2.0":"2018-03-15T17:24:15.857Z","2.2.1":"2018-03-21T19:36:14.476Z","2.2.2":"2018-08-28T23:20:12.754Z","2.2.3":"2018-09-08T04:59:05.957Z","2.2.4":"2018-10-12T02:07:55.447Z","2.2.5":"2018-12-10T20:14:02.897Z","2.2.6":"2019-11-08T19:00:12.581Z","2.2.7":"2020-01-06T22:57:45.060Z","2.2.8":"2020-03-27T07:30:43.334Z","3.0.0":"2020-06-03T02:44:28.565Z","3.0.1":"2020-06-13T19:07:56.103Z","3.0.2":"2020-09-30T06:43:22.778Z","3.0.3":"2021-05-16T06:58:30.401Z","4.0.0":"2022-05-05T23:53:08.373Z","4.0.1":"2022-08-31T23:04:29.917Z","4.0.2":"2023-08-27T20:53:51.858Z"},"homepage":"https://github.com/yowainwright/reframe.ts#readme","keywords":["js","iframes","fluid","responsive","video","fitvids","youtube","embeds","padding-top"],"repository":{"type":"git","url":"git+https://github.com/yowainwright/reframe.js.git"},"author":{"name":"Jeff Wainwright","email":"yowainwright@gmail.com","url":"http://jeffry.in"},"bugs":{"url":"https://github.com/yowainwright/reframe.ts/issues"},"license":"MIT","readmeFilename":"README.md","users":{"dollarshaveclub-engineering":true,"davidazullo":true,"yowainwright":true}}
![\"Reframe.js,](\"https://yowainwright.imgix.net/gh/reframe.svg\")
\n![\"npm](\"https://badge.fury.io/js/reframe.js.svg\"){kind=icon}
\n \n \n ![\"unpkg\"](\"https://img.shields.io/badge/unpkg-link-blue.svg\"){kind=icon}
\n \n \n ![\"snyk\"](\"https://snyk.io/test/github/yowainwright/reframe.ts/badge.svg\"){kind=icon}
\n \n \n ![\"Build](\"https://travis-ci.org/dollarshaveclub/reframe.js.svg?branch=master\")
\n \n \n ![\"Share\"](\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social&maxAge=2592000\")
\n \n