videoタグをレスポンシブ対応させる方法【CSS1行】

<video>タグで埋め込んだ動画をレスポンシブ対応させるには、video { width: 100%; }を使います。

videoタグをレスポンシブ対応させる方法

冒頭で述べた通りCSSのwidth: 100%;を用いることでvideoタグをレスポンシブ対応させることができます。

また、最大幅を指定したい場合は併せてmax-widthで指定します。

デモページ

video {
  width: 100%; /* 動画をレスポンシブ化 */
  max-width: 400px; /* 動画の最大幅 */
}

なお、<video>のdisplayのデフォルト値はinlineです。通常のinline要素はwidthで幅を指定することができませんが、<video>はその例外となっています。

videoタグのwidth属性を指定した場合

videoタグは属性としてwidth=""やheight=""を取ることができます。これらを使うことで動画のサイズを指定することができますが、取れる値が絶対的な数値（ピクセル）に限定されます。

そのため、ウィンドウ幅に応じてサイズを変化させるレスポンシブをこれらの属性によって実装することはできません。