jQuery Responsinatr is a new free plugin to add responsive support to your iframes.

You can find iframes in YouTube, Giphy, Ted, Google Maps, Vimeo, etc; the most popular websites provide the HTML code to embed media into your website, however doesn't include responsive support.

jQuery Responsinatr solves that issue with dynamic resizing based on the screen size to make the iframes adapt to smartphones, tablets and desktop computers.

See the demo  Resize the browser to see how the embeds adapt to the screensize.

Download jQuery Responsinatr The file you need is jquery.responsinatr.min.js

How to use jQuery Responsinatr

Load jQuery

Load jQuery inside the head of your site, or before closing body tag:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Note: at the time of writing this, the plugin has been tested in jQuery 2.1.4+

Load jQuery Responsinatr plugin

Load jQuery Responsinatr plugin just after jQuery:

<script src="/path/to/jquery.responsinatr.min.js"></script>

Execute Responsinatr

Just below the call to Responsinatr, execute the plugin using the code below.

<script>
$(function(){
    $('body').responsinatr();
});
</script>

To add responsive support to the iframes inside a specific container, define a target as follows:

<script>
$(function(){
    $('body').responsinatr({
        target: '#container-id iframe'
    });
});
</script>

Report bugs

If you detect a bug or have feedback to improve jQuery Responsinatr plugin, please post it here.