Auto Resizing iFrame with jQuery rIframe Plugin

Auto Resizing iFrame with jQuery rIframe Plugin
File Size: 5.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="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.