jQuery Plugin To Scale An Element According Window Size - fitToParent

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.