sadet48 - background-video

<!DOCTYPE html>
<html>
<head>
  <title>Html5 Full Screen Background  Video</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body {
background: url('https://img.webme.com/pic/s/sadet48/buck_bunny.jpg') 50% 50% fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
position: fixed;
}
.video {
top: 0;
left: 0;
position: fixed;
visibility: visible;
min-width: 150%;
main-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
p {
font-family:'Varela Round',sans-serif;
font-size:50px;
color:#fff;
background:#555;
margin:250px 50px;
padding:20px;
opacity:0.125;
z-index: 1;
}
</style>
</head>
<body>
<video class="video" id="" loop autoplay preload poster="https://img.webme.com/pic/s/sadet48/buck_bunny.jpg">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
</video> 
<p>HTML5 Full Screen Background Video</p>
</body>
</html>