16:9-Seitenverhältnis mit fester Breite

Wenn ich das einbetten eines YouTube-Videos zum Beispiel

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

Mithilfe von jQuery würde ich eine Höhe mit einem Seitenverhältnis von 16:9 also, wenn die Breite 560 Höhe sollte 315px.

Ich habe diese jquery für die Höhe festlegen, aber ich weiß nicht, wie die 16:9-Seitenverhältnis

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

oder kann das getan werden, ordentlich mit css?

InformationsquelleAutor Yusaf Khaliq | 2011-11-04
  1. 21

    Seitenverhältnis, ist gerade Breite:Höhe. Also, wenn Sie wollten, um die Berechnung der Höhe basierend auf einem bekannten der Breite ist es ziemlich einfach.

    //width=560, wanted height is 315
$('.player').parent().attr('height', 560*9/16);
    • Für bonus-Punkte, was ist das Gegenteil? Zum Beispiel, wenn Sie die Höhe, sondern wollen die Breite?
    • Klappen Sie den Teiler, zB 315 * 16/9 = 560
    InformationsquelleAutor mrtsherman
  2. 3

    Ich würde empfehlen, mit css calc anstelle von jQuery für diese:

    width: 560px;
height: calc(560px * 9/16);
    • dies ist eigentlich eine wirklich gute Lösung für jetzt. Ich fragte diese in 2011 und ich immer, obwohl, warum können wir das nicht machen via css. geniale Lösung jetzt.
    InformationsquelleAutor Mattias H
  3. 0
    $('.player').parent().attr('width', 560*9/16)
    • Nicht, dass das Seitenverhältnis beibehalten?
    • Wollen Sie es, um das Seitenverhältnis beibehalten, wenn der iframe wurde, um die Größe zu ändern?
    • nicht nur mit der angegebenen Breite
    InformationsquelleAutor Marius
  4. 0

    Ziemlich alte Frage, aber wenn jemand noch auf der Suche nach der Antwort, könnte ein besserer Ansatz. 

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

Funktion getRelativeHeight(Verhältnis, crntWdth) { 
ratio = Verhältnis.split(":"); 
var wdthRto = Verhältnis[0]; 
var hghtRto = Verhältnis[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);
    InformationsquelleAutor shekhardtu
Schreibe einen Kommentar