iPad（iOS6）のSafariでHTML5動画がページ幅100%にスケールされない問題の解決方法

iPad（iOS6）のSafariでHTML5動画がページ幅いっぱいに表示されない問題

iPad（iOS6）搭載のSafariブラウザでは、HTML5の<video>要素にwidth: 100%を指定しても、動画がページ幅いっぱいに拡大縮小されないという不具合が発生することがあります。この記事では、その問題をCSSだけで解決する方法を紹介します。

解決策：レスポンシブパディングを活用する

この問題を回避するには、「レスポンシブパディング」と呼ばれるテクニックを使用します。具体的には、padding-topに親要素の幅に対する割合（パーセント）を指定することで、アスペクト比を維持したままコンテナの高さを確保します。

一般的な16:9のワイド動画の場合、計算式は「9 ÷ 16 × 100 = 56.25%」となるため、padding-top: 56.25%を指定します。

CSSコード例

#video-box {
    padding-top: 56.25%;
    position: relative;
}
video, object {
    width: 100%;
    height: 100%;
    top: 0;
    display: block;
    position: absolute;
}

このコードが機能する仕組み

まず、ラッパー要素である#video-boxにposition: relativeとpadding-top: 56.25%を設定します。これにより、親要素の幅に連動した高さが自動的に生成され、16:9のアスペクト比を持つボックスが作られます。

次に、video要素やobject要素をposition: absoluteで配置し、幅と高さをそれぞれ100%に設定することで、作成されたボックス全体に動画がぴったりと収まるようになります。この方法なら、iOS6のSafariでも画面幅に応じて動画が正しくスケーリングされるようになります。