scale - Proportionally resize iframe to fit in a DIV using jQuery

Question

I have an iframe of a video inside a div, like so:

<div class="media">
    <iframe>
</div>

I set the DIV's size dynamically on window resize.

I want to scale the iframe to fit inside the div, while maintaining it's aspect ratio. Most of the code out there deals with scaling images, which is easier.

This is what I have so far, but it doesn't work:

jQuery.fn.fitToParent = function()
{
    this.each(function()
    {
        var width  = jQuery(this).width();
        var height = jQuery(this).height();
        var parentWidth  = jQuery(this).parent().width();
        var parentHeight = jQuery(this).parent().height();

        if(width < parentWidth)
        {
            newWidth  = parentWidth;
            newHeight = newWidth/width*height;
        }
        else
        {
            newHeight = parentHeight;
            newWidth  = newHeight/height*width;
        }

        jQuery(this).css({
            'height'     :newHeight,
            'width'      :newWidth'
        });
    });
};

Basically, I'm looking to replicate the sizing that "background-size: contain" does for images in CSS, but for an iframe in a DIV.

Thanks for the help!

Answer 1

Three issues noted:

1. You have an error (trailing quote) in your example:

   :newWidth'

2. You need to set the iframe actual height and width attributes and not the style. Styling an iframe size has no effect:

   $(this).width(newWidth);
   $(this).height(newHeight);
   

3. the calculation for aspect ratio was wrong (needs to compare ratios to see which way they overlap). Without this not all overlap cases are catered for.

   var aspect = width/height;
   var parentAspect = parentWidth/parentHeight;
   if (aspect > parentAspect)
   {
       newWidth  = parentWidth;
       newHeight = newWidth / aspect;
   }
   else
   {
       newHeight = parentHeight;
       newWidth  = newHeight * aspect;
   }
   

I also cleaned up the code a little to speed up element access. Each call to jQuery(this) costs cycles.

JSFiddle here: http://jsfiddle.net/TrueBlueAussie/ZJDkF/8/

Updates:

The jsfiddle now has examples of the 4 different scenarios of overlap and each retains the proportions of the iframe. I also added the window resize you mentioned and made the first div resize dynamically with it to demonstrate.