响应式 Web 设计 - 视频(Video) → レスポンシブ Web デザイン - ビデオ

使用 width 属性 → width 属性を使用する

width 属性を 100% に設定すると、ビデオプレーヤーは画面サイズに応じて自動的に比率を調整します：

上記の例では、ビデオプレーヤーは画面サイズに合わせて自動的に比率を調整し、元のサイズより大きくすることができます。多くの場合、max-width 属性を使用して置き換えることができます。

使用 max-width 属性 → max-width 属性を使用する

max-width 属性を 100% に設定すると、ビデオプレーヤーは画面に合わせて自動的に比率を調整しますが、元のサイズを超えることはありません：

ウェブページにビデオを追加する

ウェブページにビデオを追加できます。以下の例では、ビデオは div 領域のサイズに合わせて自動的に調整され、div 領域全体を埋めます：