css + html: pourcentages relatifs? (mediaqueries)

Question

hey les gars, situation étrange où je ne sais pas comment résoudre ce problème. J'essaie de faire un site web réactif avec des mediaqueries. Les vidéos YouTube embarquées doivent également répondre à la mise en page, donc j'essaye de régler le pourcentage de chaque vidéo à 100% et calculer sa hauteur en ratio!

Le résultat ressemble à ceci:

<p class="youtube-vid"> 
<object width="100%" height="61%"> 
<param name="movie" value="http://www.youtube.com/v/rBa5qp9sUOY?version=3"> 
<param name="allowFullScreen" value="true"> 
<param name="allowscriptaccess" value="always"> 
<embed src="http://www.youtube.com/v/rBa5qp9sUOY?version=3" type="application/x-shockwave-flash" width="100%" height="61%" allowscriptaccess="always" allowfullscreen="true"> 
</object> 
</p> 

donc à l'origine de cette vidéo a été 500px par 306px lors de l'intégrer à partir de YouTube. Le problème est que cette chose pourrait effectivement fonctionner, mais je ne sais pas où les pourcentages se réfèrent. Lorsque 100% de la largeur est totalement correcte et dépendante de ma mise en page 61% en hauteur n'est pas correcte. 61% est le nombre correct, mais il semble mal parce que c'est probablement 61% de quelque conteneur externe ou quelque chose.

Une idée comment je pourrais résoudre ce problème. Je veux simplement que mes vidéos soient à 100% avec (ce qui est correct en ce moment - même lors du redimensionnement) et la hauteur proportionnelle en fonction des valeurs originales de la vidéo?

Answer 1

height et width sont calculés séparément et indépendamment du format d'origine. Essayez simplement de régler height="100%" et le width pas du tout. Je sais que cela fonctionne avec les images pour garder le ratio d'aspect, mais je ne suis pas sûr que cela fonctionne aussi avec des objets.