Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[html][css] 動画を表示する

html css

videoタグで背景いっぱいに動画を表示

f:id:akatonbo_web:20150804204534p:plain

html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<video id="bgvid" autoplay loop muted>
<source src="video.mp4" type="video/mp4">
</video>

<div id="container">
<div class = "overlay">
<h1>動画を背景にする</h1>
<!--[if lt IE 9]>
<script>
  document.createElement('video');
</script>
<![endif]-->

<p><ruby>薔薇<rt>ばら</rt></ruby></p>
<p>サンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストですサンプルテキストです
</p>
</div>
</div>
</body>
</html>

css

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

video#bgvid{
position:fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background:url(XXXX.jpg) no-repeat; /* 非対応時の表示画像*/
background-size: cover; /* containとの差に注意 */
display: block; /* IE8以下対応 */
}
#container{
  width: 100%;
  height: auto;
  background:rgba(231, 76, 60, 0.6);
}
.overlay{
  background: rgba(0,0,0,0.4);
  color: #FFF;
  margin: 40px;
  padding: 20px 20px 50% 20px;
  width: 40%;
  border-radius: 10px;
  float: left;
}
.overlay h1{
  font-size: 3em; 
  margin-bottom:20px;
}
.overlay p{
  line-height: 1.5;
}