Preserving Aspect Ratio For iFrames - jQuery keep-ratio
File Size: | 14.2 KB |
---|---|
Views Total: | 680 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.