jQuery Plugin To Scale An Element According Window Size - fitToParent

jQuery Plugin To Scale An Element According Window Size - fitToParent
File Size: 3.54 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery plugin that responsively and dynamically stretches and shrinks an element to fill its parent container while still maintaining the original aspect ratio. Great for responsive iframes, images, Youtube/Vimeo videos.

How to use it:

1. Include the jQuery fitToParent plugin's script after you've include the latest version of jQuery.

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

2. Wrap your element into a container as follow:

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

3. Initialize the plugin to make the iFrame embedded YouTube Video auto scale to fit within its parent container 'iframe-demo'.

$('iframe').fitToParent();

4. Don't forget to re-init the plugin on window resize.

$(window).on('resize', function(){
  jQuery('iframe').fitToParent();
});  

5. Options and defaults.

$('iframe').fitToParent({
  heightOffset: 0,
  widthOffset: 0,
  boxHeight: $box.height(),
  boxWidth: $box.width(),
  callback: null
});

Change log:

2017-04-22

  • Fixed to work with flexbox

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