CSSだけで実装可能！画面いっぱいに動画背景を表示する方法

JavaScriptを使わなくても、動画背景はCSSだけで実装できます！

トップページで動画背景を使っているサイトをよく目にしますが、昨今の動画メディアの台頭を考えると、トップページに動画背景を使ったサイトは今後も増えていくと思われます。

という事で、ある程度の初心者でも難しいスクリプトを使わずに、CSSだけで実装できる動画背景の作り方を紹介したいと思います。

動画背景を作る前に必要な事
CSSだけで動画背景を実装する
動画ファイルを複数指定したい場合
- - 動画ファイルを複数指定
まとめ

動画背景を作る前に必要な事

動画素材を用意する

何はともあれ、まずは背景に設定したい動画ファイルを用意します。

動画素材が必要な時は、よく「MAZWAI」さんの動画を使用させてもらいます。
クセがなく使いやすい動画が多いし、背景用画像が同時にダウンロードできるのでオススメです。

無料のビデオクリップ MAZWAI

動画のファイルサイズを確認

動画背景のファイルサイズが大きいと読み込みに時間がかかるので、動画ファイルを圧縮してファイルサイズを軽くします。

私はいつも「Miro Video Converter」を使っています。
細かい画質は設定できませんが、手軽にファイルサイズを軽くできるので、動画背景のような画質にこだわらない動画ファイルには最適なアプリです。

Miro Video Converter

代替画像を用意しておく

ユーザーの環境によっては、動画ファイルが利用できない場合もあるので、代替表示させる背景画像を用意します。

「background」プロパティにも背景画像を指定しておくと、動画ファイルの読み込みに時間がかかった場合、先に背景画像が表示されるので、ユーザービリティ的な理由としても、できる限り動画と合わせた背景画像を用意した方が良いですね。

大抵は、動画ファイルの最初のフレームをjpegで書き出して背景画像に設定しますが、上記で紹介した MAZWAI だと背景画像も同時にダウンロードが可能です。

CSSだけで動画背景を実装する

動画ファイルと背景画像が準備できたら、HTMLとCSSで動画背景を作っていきますが、今回紹介する方法は「background」プロパティで動画を指定しません。video要素に、別の要素を「position」プロパティを使って重ねることで、動画背景の上にコンテンツがのっているように見せます。

動画ファイルをページに埋め込むには？

動画ファイルをWEBページ内に埋め込むには、<video>タグを使います。

<video src="sample.mp4" poster="sample.png" controls autoplay loop></video>

1	<video src="sample.mp4" poster="sample.png" controls autoplay loop></video>

videoタグにはいくつか属性があって、それらを指定することで再生やループのコントロールが可能になります。

poster属性

先にも書いたように、動画ファイルが利用できない環境で代替表示される画像を指定します。

controls属性

動画再生・停止・ボリューム調整などのユーザーコントロールの表示・非表示を設定します。

autoplay属性

動画ファイルが自動再生されます。動画背景に必須の属性です。

loop属性

動画が繰り返し再生されます。こちらも動画背景の場合はよく使われます。

<video>タグを使って動画を埋め込む

サンプルの動画背景に使用したHTMLとCSSです。

HTML

<!-- 動画背景 -->
<div class="wrap">
	<!-- 背景用の動画ファイル -->
	<video id="bg-video" src="video/sample.mp4" poster="poster.jpg" autoplay loop></video>
	<!-- 背景の上に表示させたいコンテンツ -->
	<div class="header-title">
		<p>
			コンテンツが入ります
		</p>
	</div>
</div>

<p>

コンテンツが入ります

</p>

</div>

CSS

/* ----- 背景用の動画ファイル ----- */
#bg-video{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	background: url('poster.jpg') no-repeat;
	background-size: cover;
}
/* ----- 背景の上に表示させたいコンテンツ ----- */
.header-title{
	position: relative; /*必ず必要*/
	z-index: 2; /*必ず必要*/
	display: flex;
	width: 50%;
	justify-content: center;
	align-items: center;
	text-align:center;
	margin: auto;
}

/* ----- 背景用の動画ファイル ----- */

#bg-video{

position: fixed;

right: 0;

bottom: 0;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

background: url('poster.jpg') no-repeat;

background-size: cover;

}

/* ----- 背景の上に表示させたいコンテンツ ----- */

.header-title{

position: relative; /*必ず必要*/

z-index: 2; /*必ず必要*/

display: flex;

width: 50%;

justify-content: center;

align-items: center;

text-align:center;

margin: auto;

}

背景の上に表示させたいコンテンツの「position: relative;」と「z-index」は必ず指定する必要があります。

「display: flex;」はボックスを背景のセンターに表示させるために指定しており、「width」は任意の値で問題ありません。

グラデーションオーバーレイ

ついでに、少し前に流行ったCSSのグラデーションを使って、動画背景にグラデーションオーバーレイを設定してみます。

CSS

/* ----- グラデーションオーバーレイ ----- */
.wrap{
	height: 100vh;
	background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4),rgba(17, 66, 99, 0.6));
}

/* ----- グラデーションオーバーレイ ----- */

.wrap{

height: 100vh;

background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4),rgba(17, 66, 99, 0.6));

}

グラデーションオーバーレイをかけると、多少動画が粗くても粗さが目立たなくなるので、試してみてください。

デモはこちら

モバイル機種では<video>の自動再生に対応してなかったり、動画ファイルの読み込みに時間がかかる等、モバイルで動画背景を使うとデメリットが多いので、メディアクエリで代替画像を表示させたり、WordPressの場合は <?php if(wp_is_mobile( )): ?> のような条件分岐で対策を考える必要があります。

動画ファイルを複数指定したい場合

Googleが推奨している「webm」形式のことを考えると、動画ファイルは２種類用意するのが良いと思われます。

上記の記述だと、<video>に1種類しか動画ファイルを指定できません。
複数の動画ファイルを指定する場合は<source>を使います。

動画ファイルを複数指定

<video poster="poster.jpg" autoplay loop>
	<source src="video/sample.webm" type="video/webm">
	<source src="video/sample.mp4" type="video/mp4">
</video>