Aspect ratio 16:9 avec une largeur fixe

Si je devais intégrer une vidéo YouTube par exemple

<iframe width="560" src="http://www.youtube.com/embed/25LBTSUEU0A" class="player" frameborder="0" allowfullscreen></iframe>

À l'aide de jQuery aurais-je définir une hauteur avec un ratio d'aspect de 16:9 de sorte que si la largeur est de 560 la hauteur doit être 315px.

J'ai cette jquery pour définir une hauteur, mais je ne sais pas comment appliquer le ratio de 16:9

$('.player').parent().attr('width', ':9ratio');

ou cela peut-il être fait avec soin à l'aide de css?

double possible de Get YouTube Video dimensions (largeur/hauteur)

OriginalL'auteur Yusaf Khaliq | 2011-11-04

  1. 20

    Aspect ratio est de largeur:hauteur. Donc si vous voulez calculer la hauteur basé sur une largeur c'est assez simple.

    //width=560, wanted height is 315
$('.player').parent().attr('height', 560*9/16);
    Pour les points de bonus, ce qui est le contraire? Par exemple, lorsque vous avez de la hauteur, mais que vous voulez la largeur?
    Flip diviseurs, par exemple, 315 * 16/9 = 560

    OriginalL'auteur mrtsherman

  2. 3

    Je recommande l'utilisation de css calc au lieu de jQuery pour cela:

    width: 560px;
height: calc(560px * 9/16);
    c'est effectivement une très bonne solution pour le moment. J'ai demandé à ce en 2011 et j'ai toujours bien pourquoi on ne peut pas le faire via le css. une brillante solution maintenant.

    OriginalL'auteur Mattias H

  3. 0
    $('.player').parent().attr('width', 560*9/16)
    Le fait de maintenir le ratio d'aspect?
    Voulez-vous maintenir le ratio d'aspect si l'iframe était de changer la taille?
    pas seulement avec la largeur spécifiée

    OriginalL'auteur Marius

  4. 0

    Assez vieille question, mais si quelqu'un est toujours à la recherche de la réponse, celle-ci pourrait être une meilleure approche. 

     
fonction getRelativeWidth(ratio, crntHght) { 
ratio = rapport.split(":"); 
var wdthRto = ratio[0]; 
var hghtRto = ratio[1]; 
return ((wdthRto*crntHght) /hghtRto); 
} 

fonction getRelativeHeight(ratio, crntWdth) { 
ratio = rapport.split(":"); 
var wdthRto = ratio[0]; 
var hghtRto = ratio[1]; 
return ((crntWdth*hghtRto) /wdthRto); 
} 
var wdth = 1600; 
var hght = 900; 
var getHeight = getRelativeHeight("16:9", wdth); 
var getWeight = getRelativeWidth("16:9", hght); 

console.log(getHeight); 
console.log(getWeight);

    OriginalL'auteur shekhardtu