HTMLとCSSで背景に動画を流す

ページ全体の背景に動画を流す方法をやってみたので、忘れないようにメモ代わりに。
今回はjQueryのプラグインなどではなくHTMLとCSSだけでの実装をしてみます。

動画は

今回は「Pexels Videos」さんから拝借しました。
無料で種類も豊富なのでおすすめです。

動画の記述

videoタグを使用します。

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

poster属性

ユーザーが利用できる環境でない場合に表示させる画像指定できます。
ここで指定するものは画像の最初のフレームにするなど動画のヒントになるものがいいようです。

controls属性

指定することでインターフェース（再生／停止／ボリュームなど）が自動的に表示されます。

autoplay属性

ページの読み込み後に自動的に動画が再生されます。

preload属性

あらかじめ動画を読み込んでおけます。読み込んでおくことで再生ボタンクリック時に再生がスムーズになるという利点があります。
一般的なブラウザではautoplay = autoになっているため元々自動再生されるようになっています。

コンテンツ

動画の上に重なる部分のコンテンツを用意します。
今回はダミーコンテンツをおきます。

<div class="text">
        <h2>タイトル</h2>
        <p>テキストが入ります。</p>
</div>

CSS

動画をフルスクリーンで表示ができるよう設定します。opacityも効くようです。

video {
         position: fixed;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 1;
}

動画の上にコンテンツがくるように設定をします。
上から２行は必ず必要です。残りはビジュアルの設定になります。

.text {
        position: relative; /*必ず必要*/
        z-index: 2;  /*必ず必要*/
         text-align:center;
        width:50%;
        padding:20px;
        margin: 0 auto;
        margin-top: 200px;
        background-color:#fff;
        color: #888;
}

デモはこちら