動画のアスペクト比

16:9で横幅合わせの場合は、縦の比率を求めて9 / 16 => 0.5625 * 100 = 56.25(%)となる。
親要素の横幅に対してpadding-topを56.25%を空けることで、常に16:9の空間ができるようになる。

テンプレート


     


.move{
     position:relative;
     width:100%;
     padding-top:56.25%;
}
.move iframe{
     position:absolute;
     top:0;
     right:0;
     width:100%;
     height:100%;
}

よく使うアスペクト比

paddint-topで使う場合は100を掛けてパーセントにする

16:9
縦を求める場合: 9 / 16 = 0.5625
横を求める場合：16 / 9 = 1.7777….

4:3
縦を求める場合: 3 / 4 = 0.75
横を求める場合：4 / 3 = 1.3333….

3:2
縦を求める場合: 2 / 3 = 0.6666….
横を求める場合：3 / 2 = 1.5

黄金比(1:1.618)
縦を求める場合: 1.618 / 1 = 1.618
横を求める場合：1 / 1.618 = 0.6180469…

白銀比(1:1.414)
縦を求める場合: 1.414 / 1 = 1.414
横を求める場合：1 / 1.414 = 0.70721357…

執筆者：caskkot