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

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

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

: ログイン画面デザイン100選

ちょっとでもテンションが上がるようなログイン画面にしてみたい、ってことでググりましたところ、海外のサイト（しかも2009年）の記事ですが、ログインのデザイン画面のみを集めたサイトを見つけました。

: 【CSS】CSS3でグラデーションを作るメモ

CSS3でグラデーションを作る際、コピペですぐ出来るよう、忘備録としてポストします。

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

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

: 【CSS】tableタグのtd中でURLなどアルファベット文字列を改行させたい場合の書き方

URLなどアルファベットや記号が連続している場合、テーブルの横サイズを500px等に指定していても（自動的に）改行せず、横サイズいっぱいまで続いてしまうような場合に自動改行させる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材サイズ早見表 (565,730)

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

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

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

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

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