Scaling object element height proportional to width + constant with CSS

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

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;
}