背景全体を動画にしてオシャレなサイトを作る方法

背景に動画を用いて全画面表示することでサイトをより印象づける事ができます。

海外のサイトでは主流になって来ていますが、日本のサイトはあまり取り入れが盛んではなくまだまだ「大きな画像をスライドさせる程度のアニメーション」を用いたサイトが殆どです。

他サイトとの差を付けるには動画を使うのがおすすめです。

サンプル

See the Pen <a href='http://codepen.io/wazenmiyabi/pen/EymOGq/'>EymOGq</a> by 和禅雅 (<a href='http://codepen.io/wazenmiyabi'>@wazenmiyabi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

解説

考え方としては画面いっぱいのwidth:100%(vw)、height:100%(vh)のブロック要素<video>を作りそれをposition:fixedで固定、更にz-index:-9999で重なり順の一番後ろに配置。その上に<div id=”wrap”>などのコンテンツを作るイメージです。

動画サイズは可能な限り軽く

動画は画像に比べかなり重たいデータとなりますので、読み込みに時間が掛ります。なのでできるだけ軽くしておきましょう。

容量を軽くして劣化した画質を綺麗に見せるテクニック

サンプルでも有るように<video>と<div　id=”wrap”>の間にもうひとつ固定(position:fixed）でwidth:100%(vw)、height:100%(vh)の<div>を挟み、その<div>要素に対して半透明のドット画像をbackground-imageで重ねる事で画像の劣化を気づきにくくさせる事ができます。

スマホサイトへの対応

スマホサイトの場合は通信制限などの観点からビデオコンテンツは自動再生されない仕様となっています。さらに上のままでは再生ボタンが画面中央表示され見栄えが悪くなってしまします。

仮にその再生ボタンをタップすることで動画は動き出しますが、同時にプレイヤーに画面が切り替わるので動画を流しながらサイトを閲覧させる事は不可能です。

スマホサイトの設定方法

前で説明したとおり、PCと同じ状態で閲覧させることは不可能ですので、代わりに動画の静止画（サムネイル）を表示させるのが一番良い対処法でしょう。

やり方はサンプルを例に、<video>と<div id=”wrap”>の間にある<div id=”bgvdot”>のbackgroundをレイヤー化してドットの後ろにサムネイルとなる画像を配置

<video>はdisplay:noneとし、スマホやipadなどでは表示されないようにしておきます。

@media screen and (max-device-width: 800px) {
	#bgv{
		display: none;
	}
	#bgvdot{
		background:url(dot.png),url(thumbnail.jpg); 
		background-size:auto,auto 100%;
	}
}

IE8以前のバージョンについて

IE8以前の古いバージョンは<vide>をサポートしていませんので、もしIE8などを考慮するのであればhead内に以下のコードを記述しておきます。

<head>
<!--&#91;if lt IE 9&#93;>
<script>
  document.createElement('video');
</script>
<!&#91;endif&#93;-->
  
<style>
  video { display: block; }
</style>
</head>

HTML5 & CSS3の知識