Масштабирование высоты элемента объекта пропорционально ширине + константа с помощью CSS

Вот проблема на высоком уровне: у меня есть Flash видео плеер для видео 16: 9. Общая высота плеера зависит от самого видео плюс некоторые элементы управления. Высота элементов управления постоянна независимо от роста игрока в целом. Так что я хочу сделать масштабирование проигрывателя с помощью CSS, чтобы высота удовлетворяла уравнению: y = rx + C, где x - ширина, r - отношение высоты видео к ширине видео, а C - постоянная высота. контроля. Я

Мы разработали что-то, что работает в Webkit, но, похоже, больше ничего:

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

В Webkit Flash-ролик будет масштабироваться вертикально, чтобы заполнить нижнюю область заполнения. Однако в любом другом браузере нижний отступ - это просто пустое место.

Есть ли CSS-решение для масштабирования высоты элемента, пропорционального ширинеплюс некоторое постоянное значение? Есть много вопросов по SO, связанных с пропорциональным масштабированием, но постоянная часть - сложная часть.

Ответы на вопрос(1)

Ваш ответ на вопрос