jQuery Plugin For Cross-domain Responsive iframes - iframe-responsify

File Size: 11.1 KB
Views Total: 1643
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Cross-domain Responsive iframes - iframe-responsify

iframe-responsify is a super small (~1kb) jQuery plugin that makes iframe embedded content (external webpages, Youtube/Vimeo vidoes) fully responsive to fit within any screen size.

How to use it:

1. Load the minified version of the jQuery iframe-responsify plugin after you've loaded jQuery library like this:

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

2. Wrap your iframe into a DIV container with the CSS class of 'iframe-responsify'.

<div class="iframe-responsify">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>
</div>

3. To active the plugin, just call the function on the DIV container and done.

$( ".iframe-responsify iframe" ).iframeResponsify();

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