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制作, 動画, 背景

: 【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

以前作成したjQueryとCSSで作る「ハンバーガーメニュー」に少し手を入れて、もうちょっとだけ使えるものにしてみましたのでご紹介したいと思います。

: 【CSS】画像を円形に切り抜く方法

CSSで画像を丸く切り抜く方法を備忘録としてポストします。

: 【CSS】ラジオボタンの背景色を選択肢によって変更する方法

今までも何度か登場していますが、ラジオボタンの背景色。今回は、選択肢によって色を変えれば見やすくなると思ったのでそれに対応したものの備忘録です。

: 【CSS】backgroundプロパティのまとめ

CSSの背景関係を指定するプロパティですが、一括指定の方法をよく忘れるので、一度、backgroundプロパティに整理してみます。

: 【CSS】リストの奇数・偶数・指定番目などを指定して装飾する方法

リストの奇数・偶数・指定番目などを指定して装飾する方法を備忘録としてポストします。

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

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

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

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

HTML

CSS

結果

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

HTML

CSS

結果

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

CSS

結果

無料動画

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

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

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

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

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

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

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