Make Iframe Responsive While Preserving Aspect Ratio

A very small (less than 1kb) jQuery responsive iframe plugin which makes the iframe embedded content (typically Youtube, Vimeo videos) fully responsive according to the screen size.

How it works:

The plugin wraps the iframe element in a position: relative container, and absolutely positions the iframe content to fit within its container.

How to use it:

1. Put the JavaScript file jquery.responsive-iframe.js after you've loaded jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jquery.responsive-iframe.js"></script>

2. Call the function responsiveIframe() on the iframe element and done.

<iframe width="560" height="315" src="https://www.youtube.com/embed/H6IsIWlSVkA" frameborder="0" allowfullscreen></iframe>

$('iframe').responsiveIframe();

3. Set the aspect ratio you want to use.

$('iframe').responsiveIframe({ratio: 3/4 });

Change log:

2017-10-26

• added overflow and max-width

2017-09-20

• Fixed ratio undefined bug

---

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