Question

Here is the issue at a high level: I have a Flash video player for 16:9 video. The total height of the player is taken up by the video itself plus some controls. The height of the controls is constant regardless of the height of the overall player. So what I want to do is have the player scale with CSS so that the height satisfies the equation:
y = rx + C, where x is the width, r is the ratio of video height to video width, and C is the constant height of the controls.

I’ve worked out something that works in Webkit, but seemingly nothing else:

#video-container {
    height: 0px;
    padding-bottom: 56%; /* proportional scaling */
    position:relative;
    width: 100%;
}
#video-container object {
    height: 100%;
    padding-bottom: 50px; /* control height */
    position: absolute;
    width: 100%;
}

In Webkit, the Flash movie will scale vertically to fill the bottom padding area. In every other browser, though, the bottom padding is just empty space.

Is there a CSS-only solution for scaling the height of an element proportional to the width plus some constant value? There are plenty of questions on SO related to proportional scaling, but the constant part is the tricky part.

Answer 1

Here is a fiddle that uses slightly different numbers, but is set up to illustrate a “proportional to width plus some constant value” idea for the height. It is based on your original idea, with a tweak. It seemed to test fine in IE8+, Chrome, Firefox.

Essentially, the code you would need is probably this:

#video-container {
    position:relative;
    width: 100%;
    height: 0px;
    padding-bottom: 56%; /* proportional scaling */
    padding-top: 50px; /* add constant */
}

#video-container object {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}