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

: Bootstrapで画像をレスポンシブ対応した際にセンタリングさせる方法。

Bootstrap使用時、「img-responsive」プロパティで画像をレスポンシブ対応させた場合に左寄せとなりますが、それを中央寄せ（センタリング）させる方法を忘備録としてポストします。

: 【CSS】「white-space:nowrap」で、タグクラウドを改行させずに表示させる

以前から、タグクラウドの表示で一文が改行させるのが非常に気になっていましたが、何の事はない、対象のaタグに対して white-space:nowrap を指定するだけですっきりさせることが出来ましたので、備忘録としてポストします。

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

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

: WEBアイコンフォントの font-awesome を背景として指定する方法

WEBアイコンフォントで有名な「font-awesome」のアイコンをh1などの標題で使う際、各ページの標題に埋めるのもメンテナンスが大変なので背景に出来ないかと思ったので、その方法を備忘録としてポストします。

: 【CSS】blockquoteタグのデザインを見栄えよくしてみる

ポスト内容に参照元のテキストを引用する場合に使う「blockquote」タグですが、デフォルトの見た目がイマイチだったので見やすさ、分かりやすさ、自己満足度を高めるためにデザインを編集してみました。

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

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

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

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

HTML

CSS

結果

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

HTML

CSS

結果

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

CSS

結果

無料動画

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

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

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

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

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

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

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