サイト練習：背景が動画：英語版 - Webデザインのこと、いろいろ

背景が動画2：完成版にリンク
NASA：文章をお借りしています
Mazwai：動画をお借りしています
Google Fonts：google fonts

★ビデオタグの使い方
★ビデオの上に文章が重なるので、ビデオにはz-indexを振り分けている

f:id:sankoblog:20160404012905p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景が動画2</title>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width">  <!--★いるよ！！-->
<!--[if lt IE 9]>
<script>
  document.createElement('video');
</script>
<![endif]-->
<style>
html,body, div, h1, p, video {
  margin: 0;
  padding: 0;
	line-height: 1.0;
}
html,body {
	height: 100%;
}
video {
	position: fixed;
	left: 0;
	top: 0; /* NHKのときだけ*/
	min-width: 100%;
	min-height: 100%;
	width: auto;
	heiht: auto;
	z-index: -100;
	background: url(img/.png) no-repeat;  /*動画が表示されない場合の代替画像*/
	background-size: cover;
	display: block;  /*IE８以下の為*/
}
#container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
 }
.overlay {
  background: rgba(0, 0, 0, 0.2); /* 画像をぼかしている*/
  color: #FFF;
  margin: 60px;
  padding: 30px;
  width: 440px;
  border-radius: 20px;
	border: 2px solid #FFF;
  float: right;
}
h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 36px;
	line-height: 1.5;
	color: #FFF;
	text-align: center;
	text-shadow:
	1px 1px 0 #000,
	-1px 1px 0 #000,
	1px -1px 0 #000,
	-1px -1px 0 #000;
	margin-bottom: 10px;
}
p {
	font-family: 'Raleway', sans-serif;
	line-height: 2;
	color: #FFF;
}
/* font-size */
html { font-size: 62.5%; }  /* =10px */
body { font-size: 16px; font-size: 1.6rem; }  /* =16px */
h1 { font-size: 32px; font-size: 3.2rem; }
p { font-size: 16px; font-size: 1.6rem }
</style>
</head>

<body>
<video autoplay loop muted> <!--自動再生、ループ、最初は音なし-->
<source src="img/stars.mp4" type="video/mp4">
</video>
<div id="container">
<div class="overlay">
<h1>NASA's<br>
'Spaceport of the Future'<br>
Reaches Another Milestone</h1>
<p>NASA has completed a major milestone on its journey to Mars and is ready to begin another phase of work on its spaceport of the future, where the next generation of astronauts will launch to Mars and other deep-space destinations.

The agency recently wrapped up a comprehensive and successful review of plans for the facilities and ground support systems that will process the agency’s Space Launch System (SLS) rocket and Orion spacecraft at NASA’s Kennedy Space Center in Florida.</p>
</div><!--.overlay-->
</div><!--#container-->
</body>
</html>