videoタグを使って背景に動画を設定する方法【HTML/CSS】

最終更新日：2024-12-03

公開日：2024-12-03

ページ内に広告が含まれています。

通常、背景に画像を設定する場合はCSSのbackgroundプロパティで設定できますが、動画の場合はbackgroundプロパティでは設定できません。
ですので、今回はvideoタグを使った背景動画の設定方法を解説していきます。

videoタグについての詳しい解説は、videoタグで動画を埋め込む方法と自動再生について【HTML】をご覧ください。

ブロックの背景に動画を設定する方法
ページ全体の背景に動画を設定する方法
さいごに

ブロックの背景に動画を設定する方法

まずは基本となるブロックの背景に動画を設定する方法です。
以下のコードをご覧ください。

<div class="movie_blk">
    <video src="sample_movie.mp4" autoplay muted loop playsinline></video>
    <p>背景に動画</p>
</div>

背景に動画を設定しますので、videoタグには自動再生・ミュート・ループ・インライン再生の属性を指定しています。各属性の詳しい解説は、videoタグで動画を埋め込む方法と自動再生について【HTML】をご覧ください。

.movie_blk {
    width: 100%;
    height: 300px;
    position: relative;
}
.movie_blk video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.movie_blk p {
    font-size: 20px;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%,-50%);
}

動画を背景に設定する場合は、CSSで動画の上に要素を重ねる形になります。
今回は、親要素の高さを固定し、video要素をpositionプロパティで絶対配置にして、width・heightプロパティを100% + object-fit: cover;で親要素全体に表示されるようにしています。
object-fitプロパティについては、縦横比を保ったままCSSでトリミングも可能なobject-fit【CSS】をご覧ください。

背景に動画

動画の上に重ねる要素(今回はpタグ)を絶対配置にしない場合は、親要素のheightプロパティを指定せず、paddingプロパティや内包する要素で高さを可変にする事も可能です。

また、動画の上に疑似要素(before、after)でオーバーレイなどを重ねる事で、多少動画が荒くてもカバー出来たり、動画が必要以上に目立たなくなりますので随時対応していただければと思います。

ページ全体の背景に動画を設定する方法

ページ全体の背景に動画を設定する場合も、先ほどのブロックの背景に動画を設定する場合のやり方と同じような形になります。

<body>
    <div class="movie_blk">
        <video src="sample_movie.mp4" autoplay muted loop playsinline></video>
    </div>

    <!-- 以下コンテンツ内容が入ります -->
</div>

body {
    position: relative;
}
.movie_blk {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
}
.movie_blk video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

動画のブロックをposition: fixed; + z-index: -1;にする事で背面に表示しています。
もしも動画がはみ出る場合はoveflow: hidden;を追加し、コンテンツ内容が背面になるようでしたらposition: relative; + z-index: 1;を追加してみてください。