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

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

動画を背景にする

CSS応用

最近は動画を背景に使った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 lang="ja">
<head>
<meta charset="utf-8">
<title>動画を背景にする</title>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
html,body,h1,p,video {
  margin: 0;
  padding: 0;
  line-height:1.0;
}
  video#air {
  position: fixed;
  left: 0;
  top: -100px;
  width: 100%;
  z-index: -100;
  background: url(XXXX.jpg) no-repeat;  /*動画が表示されない場合の代替画像*/
  background-size: cover;
}
header {
  width:500px;
  height:300px;
  padding:20px;
  box-sizing:border-box;
  background:rgba(255,255,255,0.3);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  border-radius:20px;
}
h1 {
  text-align:center;
  margin-bottom:60px;
  font-size:46px;
  margin-top:20px;
  color:#FFFFFF;
  text-shadow:0 0 5px #666666;
  font-family: 'Raleway', sans-serif;
}
p {
  line-height:1.6;
}
</style>
</head>

<body>
<video id="air" loop autoplay muted>
<source src="img/video.mp4" type="video/mp4">
</video> 
<header>
<h1>Sunset over City</h1>
<p>"The sun rose over the city." "The sun set over/under the city." The second sentence is giving me trouble. The sun (usually) goes down below the horizon, so "under" seems to make perfect sense.</p>
</header>
</body>
</html>

yachin29.hatenablog.com

広告を非表示にする