Lightweight jQuery Responsive iFrame Plugin - FitFrame.js

Lightweight jQuery Responsive iFrame Plugin - FitFrame.js
File Size: 12.7 KB
Views Total: 5080
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.