jQuery Plugin For Simple Responsive iFrames - mediaWrapper.js

mediaWrapper.js is a minimalist jQuery plugin that makes your iFrame element responsive while keeping the aspect ratio by auto adjusting the height and width depending on the screen size and embedded content such as Youtube videos, webpages and Facebook widgets.

See also:

• jQuery Plugin For Auto Resizing iFrame - iframe Auto Height
• Lightweight jQuery Responsive iFrame Plugin - FitFrame.js
• Responsive IFrames Plugin For jQuery
• Auto Resizing iFrame with jQuery rIframe Plugin
• jQuery Plugin For Auto Resizing iFrame - iFrame Resizer

Basic usage:

1. To get started, you need to include both jQuery JavaScript library and the jQuery mediaWrapper.js plugin on your responsive webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.mediaWrapper.js"></script>

2. To initialize mediaWrapper.js just call the mediaWrapper() on your iFrame element:

$('iframe.demo').mediaWrapper();

3. Here are several options you can pass as an object during initialization.

$('iframe.demo').mediaWrapper({

  // use the intrinsic width and height
  intrinsic   : true,

  // the aspect ratio of the content you are embedding
  baseWidth   : 16,
  baseHeight  : 9
  
});

Changelog:

2020-07-01

• Fixed a bug where the intrinsic ratio fails because it can't properly evaluate the values of width and/or height

---

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