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

動画背景サムネイル






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

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

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

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

動画素材を用意します

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

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

MAZWAI
MAZWAI

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

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

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

Miro Video Converter
Miro Video Converter

代替画像を用意しておく

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

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

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

代替画像を用意する

とりあえずbackgroundプロパティは使わない

とりあずCSSで動画背景と聞くと「background」プロパティを想像しがちですが、今回紹介する方法は「background」プロパティで動画を指定しません。

video要素に、別の要素を「position」プロパティを使って重ねることで、動画背景の上にコンテンツがのっているように見せます。

背景画像を指定



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

動画ファイルと背景画像が準備できたら、HTMLとCSSで動画背景を作っていきます。

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

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

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

poster属性

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

controls属性

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

autoplay属性

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

loop属性

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

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

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

HTML

CSS

背景の上に表示させたいコンテンツの「position: relative;」と「z-index」は必ず指定する必要があります。「z-index」は動画ファイルよりも小さい値を指定します。

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

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

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

CSS

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

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




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

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

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

動画ファイルを複数指定

まとめ

最近、自社ページ更新に伴って動画背景を使ってみました。やっぱり動画だとイメージやインパクトが伝わりやすいので、WEBサイトのイメージそのものがガラリと変わった気がしました。

今後もしばらくは動画背景が使われそうなきがするので、色々試してみたいと思います。

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

やっぱりイケてる!動画背景をトップページに使ったWEBサイトを紹介

2018.08.14






動画背景サムネイル