caskkot

日常のことから、商品レビューまで何でもありの雑記ブログ(キャスコット)

メモ

【webメモ】youtube、videoタグなどの動画のレスポンシブ

投稿日:2019年12月16日 更新日:

webのメモとして残しますー!
どこかのサイトを参考にさせてもらったんですが、忘れてしまったよ…

動画のアスペクト比

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…

-メモ
-

執筆者:

関連記事

【jQueryメモ】横向き縦向き判定

jQueryのメモとして残しますー! 一覧 読み込み時 回転時 縦で持っているか横で持っているかページ読み込み時に調べる $(function () { var orientation = windo …

【cssメモ】cssアニメーション一覧

cssのメモとして残しますー! 一覧 テンプレート 単語説明 各詳細 テンプレート animation: name 0.6s ease-in-out infinite alternate; -webk …