Preserving Aspect Ratio For iFrames - jQuery keep-ratio

Just another jQuery responsive iframe plugin which dynamically resizes the embedded iframes (e.g. Youtube/Vimeo videos) while preserving the aspect ratio you specify.

How to use it:

1. Load the latest jQuery JavaScript library (slim build) and the jQuery keep-ratio plugin's script at the end of the html document.

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

2. Embed an Youtube video player in the document. Note that the video player must have a fixed height.

<iframe width="100%" class="keepItRatio" height="315" src="https://www.youtube.com/embed/pL1RWA_Qavs" frameborder="0" allowfullscreen></iframe>

3. Call the function on document ready and specify the aspect ratio you want to use.

// default 16:9
$(document).ready(function() {
  $(".keepItRatio").keepRatio("4:3");
});

4. Re-init the plugin on window resize.

$(window).resize(function() {
  $(".keepItRatio").keepRatio();
});

---

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