HTML5 videoタグで背景に動画を使ったページを作る方法

2016/11/25 2019/12/14

背景に動画を使うサイトをよく見受けられるようになってきました。
どうやって作っているのか気になったので調査してみると、結構簡単に出来ることがわかったので、備忘録としてポストします。

HTML5のvideoタグで背景を動画にしてみる

例1. とりあえず背景を動画にしてみる

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>背景を動画にするテスト</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="toogie" />
<body>

<video src="./mov/sunset_timelapse.mp4" autoplay loop muted></video>
<p>動画を背景にする</p>

</body>
</html>

<!DOCTYPE html>

<head>

<title>背景を動画にするテスト</title>

<body>

<p>動画を背景にする</p>

</body>

</html>

CSS

body {
    background: #999;
}

video {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;
}

p {
    color: #fff;
    font-size: 400%;
    margin: 50px;
    position: relative;
    z-index: 2;
}

body {

background: #999;

}

video {

position: fixed;

right: 0;

top: 0;

z-index: 1;

}

p {

color: #fff;

font-size: 400%;

margin: 50px;

position: relative;

z-index: 2;

}

videoタグに対し、右寄とz-indexを設定しているだけで、特に特殊なことはしていません。
pタグに対し、同様にz-indexを設定し、背景の上に文字が乗るようにしています。

結果

例2. ウィンドウサイズに応じて伸縮させる

ウィンドウサイズに応じて背景動画を伸縮させるには、以下のように。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>背景を動画にするテスト</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="toogie" />
<body>

<video src="./mov/sunset_timelapse.mp4" autoplay loop muted></video>

</body>
</html>

<!DOCTYPE html>

<head>

<title>背景を動画にするテスト</title>

<body>

</body>

</html>

CSS

video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    z-index: 1;
}

p {
    color: #fff;
    font-size: 3em;
    margin: 50px;
    position: relative;
    z-index: 2;
}

video {

position: fixed;

right: 0;

bottom: 0;

min-width: 100%;

min-height: 100%;

height: auto;

width: auto;

z-index: 1;

}

p {

color: #fff;

font-size: 3em;

margin: 50px;

position: relative;

z-index: 2;

}

結果

例3. ブラウザ幅に動画を合わせてみる

例1, 例2 ともに、PCではまぁまぁ見栄えはしますが、スマホではイマイチよくわからないことになっています。
CSSをみて分かるように、横幅関係なく表示しているからですね。
動画の横幅を基準にしたい場合は、以下のように書けば良さそうです。

CSS

video {
    position: fixed;
    right: 0;
    top: 0;
    height: auto;
    z-index: 1;

    max-width: 100%;
}

p {
    color: #fff;
    font-size: 2em;
    margin: 25px;
    position: relative;
    z-index: 2;
}

video {

position: fixed;

right: 0;

top: 0;

height: auto;

z-index: 1;

max-width: 100%;

}

p {

color: #fff;

font-size: 2em;

margin: 25px;

position: relative;

z-index: 2;

}

結果

ガチで background-size タグが使えれば、background-size: cover; 辺りできれいに画面いっぱいになってくれそうですが、そううまくはいかないようです。

しかしながら（多少手間ではありますが）メディアクエリーを活用して画面サイズに応じた設定ができれば、きれいに表示することはできそうな予感。
また時間を見つけて作ってみたいと思います。

background-size: cover; についてはこちらを参照。

無料動画

今回のデモを作るのに利用しました。

背景が動画になっているサイトの例

おまけ。

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

created by Rinker

SBクリエイティブ

-HTML,CSS
-html5, video, WEB制作, 動画, 背景

: 【CSS】CSSでWEBサイトのフォントを「メイリオ」にする方法

個人的に「メイリオ」フォントが好きです。WEBサイトを作る時は表示にメイリオを使うようにするので、そのタグを忘備録としてポストします。

: 【JS】ハンバーガーメニューをjQueryとCSSで作成する方法

スマホ画面でも常時表示していたグローバルメニューを、ハンバーガーメニューをタップすれば表示し、再度タップすることで非表示にできないかと相談されたので、作ってみました。

: HTML5+CSS3で構築する際のIE9以下への対策

システムを作成する際の確認する人のポリシー(？)でIEのバージョンが8という困ったことになったので、これはいい機会だと捉え、HTML5+CSS3対策の実験台となってもらいましたｗ

: CSSのフレームワーク「Bootstrap」を使ってメールフォムを作成してみる。

CSSのフレームワークである「Bootstrap」を使って既存のメールフォームをリニューアルしたので、その使い方などを忘備録としてポストします。

: 【HTML】a要素（aタグ）で電話発信用リンクを設定する方法

a要素の href 属性に電話番号を設定するだけでスマートフォンで電話発信用のリンクを作成することが可能です。その方法を備忘録としてポストします。

PREV: CakePHP2でView/Elements以下にディレクトリを追加し、共通ページを管理する方法
NEXT: WEBアイコンフォントの font-awesome を背景として指定する方法

HTML5 videoタグで背景に動画を使ったページを作る方法

HTML5のvideoタグで背景を動画にしてみる

例1. とりあえず背景を動画にしてみる

HTML

CSS

結果

例2. ウィンドウサイズに応じて伸縮させる

HTML

CSS

結果

例3. ブラウザ幅に動画を合わせてみる

CSS

結果

無料動画

背景が動画になっているサイトの例

【DIY】2x4や1x4など、SPF材サイズ早見表 (564,183)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (278,964)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (256,780)

【歴史】江戸幕府歴代将軍一覧 (143,419)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (131,628)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (130,331)