Make Iframe Responsive While Preserving Aspect Ratio

File Size: 3.65 KB
Views Total: 1750
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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="" frameborder="0" allowfullscreen></iframe>

3. Set the aspect ratio you want to use.

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

Change log:


  • added overflow and max-width


  • 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.