CODEWITHSUNDEEP
javascriptjquerycss
Brown KL
Brown KL

Reputation: 2385

Maintaining aspect ratio of of iframe

I have an iframe that I want to maintain the aspect ratio at 16:9 (height/width) right now there is an box below the iframe that I don't want the iframe to ever overlap. So I can't use the padding bottom trick because it causes the video to overlap the box. How can I get the maximum width and height that the iframe can attain in the remaining space?

So for example let's say I have a window that is 1200px by 600px, 50px is used for a box. I want the iframe to take the maximum width and height on the remaining 1200px by 550px and still keep its aspect ratio and not ever go below the box at the bottom of the page. How can I do that using jquery? Also as the window resizes the iframe should keep its aspect ratio

I'm asking for the formula that embedded videos use to maintain their aspect ratio in an iframe. When I embed an iframe that has a video in it the video always maintains its aspect ratio by adding black boxes around it.

Here's the HTML:

<div class="iframe-container">
    <iframe></iframe>
</div>
<div class="box"></div>

Upvotes: 0

Views: 3084

Answers (2)

aaronburrows
aaronburrows

Reputation: 1020

This is pretty straightforward and can be done with CSS, if you know the expected aspect ratio. For video embeds at 16:9 (56.5%), it's done like this.

You can add max-height and max-width properties to the container just as you would any other element. The height is 0 and the padding is simply set according to the aspect ratio you want. The iframe is set to fill the container width and height so it will conform to the aspect ratio based on the padding.

.iframe-container {
    position: relative;
    padding-bottom: 56.5%;
    height: 0;    
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Update: You can do this much better with vw units.

This will work if your iframe is intended to be the full width of the browser. Otherwise you can do some calculations on it. But, for a full width iframe that you want to preserve aspect ratio on, it goes as follows (for 16:9 aspect ratio):

iframe {
    width: 100vw;
    height: 56.5vw;
}

Upvotes: 3

Bosworth99
Bosworth99

Reputation: 4244

Maintaining an aspect ratio is pretty straightforward with some conditional math, over time.

Generally, we have a container, a thing contained, and a known ratio (16/9). The height or the width can be determined by trapping the thing in the container (checking for out of bounds) and computing the other value from the ratio.

Update : once you have the new values, check for out of bounds. In this case, a min height and a max width.

A bit like so:

 // if the iframe height (container width / ratio) is greater than the container height
 if ( (cW / RATIO) > cH){
 
    h = cH;             // set the height equal to the container
    w = cH * RATIO;     // set the width equal to the container height * ratio
 } else {
 
    w = cW;             // set the width equal to the container
    h = cW / RATIO;     // set the height equal to the container width / ratio
 }

 // Ok so, now that the iframe is scaled up, check for out of bounds
 if ( iH < MIN_HEIGHT ){
  
   iH = MIN_HEIGHT;     // set the height to the const
   iW = iH * RATIO;     // use the same basic formula, but use the new value
 }
  
 if (iW > MAX_WIDTH){

   iW = MAX_WIDTH;      // set the width to the const
   iH = iW / RATIO;     // same formula, new value
 }

- Working fiddle with some discussion.
- Updated fiddle with some out of bounds checks.

You can, obviously, work some extra math into the computation to make space for a control bar, or whatever. This is just the basic principle, in a very simple state. I almost always have some additional checks against max width, or do some positioning or whatever. But this should be a good start.

Cheers -

Upvotes: 1

Related Questions