ミギムキ

[CSS] videoタグを縦横比は維持しながら全画面表示したい

公開日:2020/05/29 更新日:2021/01/14

サイトのTOPページにvideoタグを配置するときなど、動画を全画面いっぱいに全画面表示したい場合があります
「min-width」と「min-height」プロパティを併用することで、縦横比を変えずに表示領域をフルに使って動画を配置することができます

サンプルコード

html

<div class="video_wrapper">
    <video autoplay muted playsinline loop>
        <source src="xxx.mp4" type="video/mp4">
        <img src="xxx.png">
    </video>
</div>

CSS

.video_wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.video_wrapper > video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}

サンプルコードの解説

.video_wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

videoタグを囲む親要素「video_wrapper」クラスのスタイルです
videoタグに対して「position: absolute;」を適用するため、親要素には「position: relative;」を設定します
「width: 100vw;」「height: 100vh;」とすることで、要素のサイズを画面の表示領域いっぱいに広げています
videoタグは縦横比を維持した状態で中央表示するため、ウィンドウサイズによっては縦か横がはみ出ることになります。はみ出た部分が表示領域の外にはみ出さないよう「overflow: hidden;」を指定します

.video_wrapper > video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}

videoタグのスタイルです
「position」と「top」「left」「transform」によって、親要素「video_wrapper」を基準に上下左右中央揃えで配置されるようにします
「min-width: 100%;」と「min-height: 100%;」とすることで、縦か横が親要素のサイズと同じになるようにvideoのサイズが拡大されます。min-width（height）で指定することで縦横比はキープしたまま拡大させています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。