Lightweight jQuery Responsive iFrame Plugin - FitFrame.js

iFrame is an useful Html tag that provides a free way to embed any DOM elements from external sources like Youtube/Vimeo videos. FitFrame.js is a cross browser and cross domain jQuery iFrame plugin for responsive web layout that allows you to set the size of the iFrame element to fit the container by using wrap or resize modes.

See also:

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

Basic Usage:

1. Load the jQuery javascript library and FitFrame.js script at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.fitframe.js"></script> 

2. Embed an video from Vimeo as an example.

<div class="container">
<iframe src="http://player.vimeo.com/video/68160950" width="600" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

3. Call the plugin on document ready and specify the mode option.

<script>
$('.container').fitFrame({
mode: 'resize'
});
</script>

4. Available options.

$('.container').fitFrame({
  
  wrapperCssClass: 'fitframe-wrap',
  iframeCssClass: 'fitframe',

  // The default mode of FitFrame.js is wrap and uses intrinsic ratios to make the iframes responsive.
  mode: 'wrap', 

  // Fit iframe to container height
  fitHeight: false,

  containerHeight: function() { return this.element.height(); },
  containerWidth: function() { return this.element.width(); }

});

Change log:

2016-02-11

• Fixed multiple-wrap issue when calling fitFrame('update').

2016-01-29

• Container dimensions can now be specified when using fitHeight.

2015-10-14

• Corrected spelling mistake

---

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