動画を背景に使う - WEBサイト制作の勉強

最近は動画を背景に使った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; /*IE８以下の為*/
}
#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>

yachin29.hatenablog.com