Encontrei uma maneira de fazer isso usando CSS, mas você deve ter cuidado, pois isso pode mudar dependendo do fluxo do seu próprio site. Eu fiz isso para incorporar vídeo com uma proporção constante dentro de uma parte de largura de fluido do meu site.
Digamos que você tenha um vídeo incorporado como este:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
Você pode colocar tudo isso dentro de uma div com uma classe "video". Essa classe de vídeo provavelmente será o elemento fluido em seu site, de modo que, por si só, não possui restrições diretas de altura, mas quando você redimensiona o navegador, sua largura muda de acordo com o fluxo do site. Esse seria o elemento em que você provavelmente está tentando obter o vídeo incorporado, mantendo uma certa proporção do vídeo.
Para fazer isso, coloquei uma imagem antes do objeto incorporado na classe "video" div.
!!! O importante é que a imagem tenha a proporção correta que você deseja manter. Além disso, verifique se o tamanho da imagem é PELO MENOS do tamanho mínimo que você espera que o vídeo (ou seja o que você estiver mantendo o AR) seja baseado no seu layout. Isso evitará possíveis problemas na resolução da imagem quando ela for redimensionada em porcentagem. Por exemplo, se você deseja manter uma proporção de 3: 2, não use apenas uma imagem de 3 x 2 x. Pode funcionar em algumas circunstâncias, mas ainda não testei, e provavelmente seria uma boa ideia evitar.
Você provavelmente já deve ter uma largura mínima como essa definida para elementos fluidos do seu site. Caso contrário, é uma boa idéia fazê-lo para evitar o corte de elementos ou a sobreposição quando a janela do navegador ficar muito pequena. É melhor ter uma barra de rolagem em algum momento. A menor largura que uma página da Web deve ter fica em torno de ~ 600px (incluindo qualquer coluna de largura fixa) porque as resoluções de tela não são menores, a menos que você esteja lidando com sites amigáveis por telefone. !!!
Eu uso um png completamente transparente, mas eu realmente não acho que isso acabe importando se você fizer certo. Como isso:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
Agora você deve poder adicionar CSS semelhante ao seguinte:
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }
Também remova qualquer declaração explícita de altura ou largura no objeto e nas tags de incorporação que geralmente vêm com o código de incorporação de copiar / colar.
A maneira como funciona depende das propriedades de posição do elemento da classe de vídeo e o item que você deseja manter uma certa proporção. Aproveita a maneira como uma imagem mantém sua proporção adequada quando redimensionada em um elemento. Ele informa o que mais estiver no elemento de classe de vídeo para tirar o máximo proveito do espaço fornecido pela imagem dinâmica, forçando sua largura / altura a 100% do elemento de classe de vídeo sendo ajustado pela imagem.
Muito legal, né?
Talvez você precise brincar um pouco para fazer funcionar com seu próprio design, mas isso realmente funciona surpreendentemente bem para mim. O conceito geral está lá.