<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>html5 background movie sample (css+html onry)</title>
<meta name="description" content="動画背景テスト">
<meta name="keywords" content="html5,video">
<link id="reset_css" rel="stylesheet" href="css/reset.css" media="all" />
<link id="reset_css" rel="stylesheet" href="css/layout.css" media="all" />
</head>
<body>
<div id="contents">ここにこんてんつがはいるよ(´・ω・`)</div>
<div id="main"></div>
<video src="images/bg.mp4" autoplay loop muted>
</video>
</body>
</html>
body{
font-family:New Gulim;
color: white;
background:#000;
}
a { color: #F36;}
h2{
margin:1em 0 0.3em 0;
line-height:1;
background:#099;
padding:0.3em;
}
#main{
background: url(../images/bg_overlay.png);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
#contents{
background: rgba(0, 0, 0, 0.53);
padding: 20px 40px;
margin: 20px 0;
width:800px;
border-radius: 0 10px 10px 0;
position: relative;
z-index: 3;
}
video {
position: fixed; left: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(../images/bg.jpg) no-repeat;
background-size: cover;
}