J'ai trouvé un moyen de le faire en utilisant CSS, mais vous devez être prudent car cela peut changer en fonction du flux de votre propre site Web. Je l'ai fait afin d'intégrer une vidéo avec un rapport d'aspect constant dans une partie de largeur fluide de mon site Web.
Supposons que vous ayez une vidéo intégrée comme celle-ci:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
Vous pouvez ensuite placer tout cela à l'intérieur d'un div avec une classe "vidéo". Cette classe vidéo sera probablement l'élément fluide de votre site Web de telle sorte qu'elle ne présente pas en soi de contrainte de hauteur directe, mais lorsque vous redimensionnez le navigateur, sa largeur change en fonction du flux du site Web. Ce serait l'élément dans lequel vous essayez probablement d'obtenir votre vidéo intégrée tout en conservant un certain rapport d'aspect de la vidéo.
Pour ce faire, je mets une image avant l'objet intégré dans la classe "video" div.
!!! La partie importante est que l'image a le rapport d'aspect correct que vous souhaitez conserver. Assurez-vous également que la taille de l'image est au moins aussi grande que la plus petite que vous attendez de la vidéo (ou de tout ce que vous conservez l'AR) en fonction de votre mise en page. Cela évitera tout problème potentiel dans la résolution de l'image lorsqu'elle est redimensionnée en pourcentage. Par exemple, si vous souhaitez conserver un rapport hauteur / largeur de 3: 2, n'utilisez pas uniquement une image de 3 x 2 pixels. Cela peut fonctionner dans certaines circonstances, mais je ne l'ai pas testé, et ce serait probablement une bonne idée à éviter.
Vous devriez probablement déjà avoir une largeur minimale comme celle-ci définie pour les éléments fluides de votre site Web. Sinon, c'est une bonne idée de le faire afin d'éviter de couper des éléments ou de se chevaucher lorsque la fenêtre du navigateur devient trop petite. Il est préférable d'avoir une barre de défilement à un moment donné. La plus petite largeur qu'une page Web devrait obtenir se situe autour de ~ 600 px (y compris toutes les colonnes de largeur fixe) car les résolutions d'écran ne sont pas plus petites, sauf si vous avez affaire à des sites adaptés aux téléphones. !!!
J'utilise un png complètement transparent mais je ne pense pas vraiment que cela finisse par être important si vous le faites correctement. Comme ça:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
Vous devriez maintenant pouvoir ajouter du CSS similaire à ce qui suit:
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%; }
Assurez-vous que vous supprimez également toute déclaration explicite de hauteur ou de largeur dans l'objet et incorporez les balises qui sont généralement fournies avec le code d'intégration copié / collé.
Le fonctionnement dépend des propriétés de position de l'élément de classe vidéo et de l'élément que vous souhaitez conserver un certain rapport hauteur / largeur. Il tire parti de la façon dont une image conservera son rapport d'aspect approprié lorsqu'elle sera redimensionnée dans un élément. Il indique tout ce qui se trouve dans l'élément de classe vidéo pour tirer pleinement parti de l'immobilier fourni par l'image dynamique en forçant sa largeur / hauteur à 100% de l'élément de classe vidéo ajusté par l'image.
Assez cool, hein?
Vous devrez peut-être jouer avec un peu pour le faire fonctionner avec votre propre design, mais cela fonctionne étonnamment bien pour moi. Le concept général est là.