ディスプレイの幅に合わせてレイアウトが変化するレスポンシブデザインのページに、幅が可変の動画を配置するため以下のCSSを指定しました。 video { width: 100%; max-width: 100%; height: auto; } モダンブラウザやAndroidのデフォルトブラウザでは、意図したとおりウィンドウサイズに合わせて動画のサイズが縮小されます。 しかし、iPadやiPhoneでは、動画のサイズが小さくなり、動画の左右に黒く塗りつぶしたボックスが表示されてしまいます。 仕様は確認できませんでしたが、iOSのSafariではVideoのデフォルトサイズが300×150に設定されているそうです。 VIDEO要素に高さが指定されていない場合や「auto」になっている場合は、このデフォルトの高さが使用され、小さく表示されるようです。 幅に合わせて、高さが変更されるブロックを作成