読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

動画を背景に使う

HTML5+CSS3

最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。




実例

www.joe-san.com


optimo.com


www.kalexiko.com


poolhouse.co



作る際に気を付けるポイント
  • 動画ファイルは出来るだけ軽くする。(あくまでイメージなので長さも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>

yachin29.hatenablog.com

広告を非表示にする