Dead Simple jQuery Responsive Iframe Plugin

File Size: 4.4 KB
Views Total: 2883
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Dead Simple jQuery Responsive Iframe Plugin

A super tiny (1kb) jQuery plugin which auto resizes your iframe elements while keeping the regular aspect ratio to fit the current browser size on window load and resize.

How to use it:

1. Just load the main JavaScript file jquery.responsiveiframes-min.js after jQuery library and we're done.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.responsiveiframes.js"></script>

2. To disable the plugin, just add the CSS class 'no-aspect-ratio' to the target iframe element as this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ooLDtZok0Mc" frameborder="0" allowfullscreen class="no-aspect-ratio"></iframe>

Change log:

2017-07-03

  • Avoid limiting size by display/inline tags

2017-06-21

  • Interoperability with jquery.backstretch

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