Page Widget How to - Create Video Background

Question

We would like to know how to create Video Background.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--  w  w  w  .jav a2 s .  co  m-->
  background: #000;
}

.pattern {
  width: 100%;
  height: 100%;
  background: url(http://www.webcreatorbox.com/sample/images/yokojima.png);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}

video {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}

p {
  font-family: serif;
  color: #fff;
  font-size: 400%;
  margin: 50px;
  position: relative;
  z-index: 3;
}
</style>
</head>
<body>
  <p>Brilliant Blue</p>
  <div class="pattern"></div>
  <video src="http://webcreatorbox.com/sample/images/jewellery.mov"
    autoplay loop>
    <img src="http://webcreatorbox.com/sample/images/jewellery.jpg"
      alt="Placeholder">
  </video>
</body>
</html>

The code above is rendered as follows: