Auto Resizing iFrame with jQuery rIframe Plugin

rIframe is a jQuery plugin that automatically resizes the iFrame elements to fit for your responsive web layout. The plugin also allows you to set the ratio for each iframe by using data-rIframe-* attributes.

See also:

• jQuery Plugin For Auto Resizing iFrame - iframe Auto Height
• Responsive IFrames Plugin For jQuery
• jQuery Plugin For Auto Resizing iFrame - iFrame Resizer

Basic Usage:

1. Include the jQuery library and jQuery rIframe plugin in the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="rIframe.js"></script>

2. Create an iframe element with options.

<iframe id="iframe-0" src="frame.html" height="300" width="400" 
data-rIframe="4:3+50" data-rIframe-width="16" data-rIframe-height="9" data-rIframe-offset="0"></iframe>

3. Options.

• data-rIframe="4:3": set the ratio.
• data-rIframe-offset="0": add or subtract an offset.

Change log:

2014-10-03

• Fixed JS parsing error (semi-colon instead of a comma)

2014-05-28

• Update rIframe.js -- not include iframe requirement in selector

---

This awesome jQuery plugin is developed by nathanyarnold. For more Advanced Usages, please check the demo page or visit the official website.