MENU

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

Videoタグをレスポンシブ化する

<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=""を取ることができます。これらを使うことで動画のサイズを指定することができますが、取れる値が絶対的な数値(ピクセル)に限定されます。

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

この記事を書いた人

牧野健人のアバター 牧野健人 株式会社リラクス 代表取締役
目次