レスポンシブウェブページデザイン - ビデオ

width 属性を使用する

次に width 属性が 100％に設定されている場合、ビデオプレイヤーは応答し、拡大および縮小します：

video {
  width: 100%;
  height: auto;
}

上記の例では、ビデオプレイヤーは元のサイズを超えることがあります。多くの場合、max-width 属性を使用することはより良い解決策です。

次に max-width 属性が 100％に設定されている場合、ビデオプレイヤーは縮小されるが、元のサイズを超えることはありません：

video {
  max-width: 100%;
  height: auto;
}

インスタンスウェブページにビデオを追加したいと思っています。ビデオは常にすべての利用可能なスペースを占めるようにサイズ調整されます：

video {
  width: 100%;
  height: auto;
}