Preserving Aspect Ratio For iFrames - jQuery keep-ratio

File Size: 14.2 KB
Views Total: 694
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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="" 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() {

4. Re-init the plugin on window resize.

$(window).resize(function() {

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