最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。
実例
作る際に気を付けるポイント
- 動画ファイルは出来るだけ軽くする。(あくまでイメージなので長さも1分くらいをめどに)
- デフォルトではミュートの設定に
- あくまでも背景なので自動再生とループ再生の設定にする。(自動再生が効かないスマホでは代替え画像を使用する)
<video id="bgvid" autoplay loop muted>
今回作ったページ
http://yachin29.com/video1/
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>動画を背景にする</title> <!--[if lt IE 9]> <script> document.createElement('video'); </script> <![endif]--> <style> body, div, h1, p, video { margin: 0; padding: 0; } video#bgvid { position: fixed; left: 0; top: -150px; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background: url(XXXX.jpg) no-repeat; /*動画が表示されない場合の代替画像*/ background-size: cover; display: block; /*IE8以下の為*/ } #container { width: 100%; height: 100%; overflow: hidden; background: rgba(231, 76, 60, 0.2); } .overlay { background: rgba(0,0,0,0.3); color: #FFF; margin: 40px; padding: 20px; width: 400px; border-radius: 10px; float: left; } </style> </head> <body> <video id="bgvid" autoplay loop muted> <source src="dawsonfalls.mp4" type="video/mp4"> </video> <div id="container"> <div class="overlay"> <h1>動画を背景にする</h1> <p>テキスト・テキスト・テキスト</p> </div> </div> </body> </html>