VIDEOタグのレスポンシブ対応について - EatSmartシステム部ブログ

今回は、HTML5のVIDEOタグで動画再生する際にレスポンシブ対応する方法について記載します。

VIDEOタグについて

HTML5でサポートされたVIDEOタグですが、プラグイン等を使用せずに動画を再生可能で、且つ属性やイベントを豊富に揃っているので非常に便利です。

VIDEOタグの仕様

developer.mozilla.org

レスポンシブ対応について

動画をデバイス依存しない形で再生させる為に、レスポンシブ対応できないか調査してみました。

レスポンシブ対応しない場合の表示について

レスポンシブ対応しない場合は、videoタグのwidth/heightを設定して表示します。この時、videoタグのwidth/heightに対して、動画のアスペクト比は維持された状態で表示されます。

<html>
<head>
    <title>viewer</title>
</head>
<body>
    <video controls width="300px" height="300px">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    </video>
</body>
</html>

レスポンシブ対応した場合の表示について

次に、レスポンシブ対応した場合の表示ですが、videoタグのwidth/heightは絶対値のみ設定可能な為、CSSにてwidth/heightに100%を設定します。
※上記でも述べましたが、videoタグのwidth/heightに対して動画のアスペクト比は維持されますので、width/heightを100%で指定しても動画が歪んだりすることはありません。

<html>
<head>
    <style>
     #video {
        top:0;
        width: 100%;
        height: 100%;
        background: #000;/*背景を黒で表示*/
     }
    </style>
    <title>viewer</title>
</head>
<body>
    <video controls id="video">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    </video>
</body>
</html>

いかがでしたでしょうか？非常に簡単にレスポンシブ対応可能なので良かったら活用してみて下さい。