Auto Resizing iFrame with jQuery rIframe Plugin

File Size: 5.5 KB
Views Total: 1819
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

Basic Usage:

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

<script src=""></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:


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


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