Laying video behind a Div

Modern websites need to generate interest to attract visitors into them.  Short video clips as a background are a great way to introduce movement and generate interest.  You want the video to be about 20 seconds and have all sound removed.  I find 20 seconds is about the right amount of time to get some interest without the video being too repetitive or the file too large.

For an example of this in practice take a look at this Prosthetic Arm site.

Here's the CSS

.video-module {
  border-right: none;
  border-left: none;
  position: relative;
}
.no-video .video-container video,
.touch .video-container video {
  display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
  display: block !important;
}
.video-container {
  position: relative;
  bottom: 0%;
  left: 0%;
  height: 75%;
  width: 100%;
  overflow: hidden;
  background: #f0ffff;
}
.video-container .poster img {
  width: 100%;
  bottom: 0;
  position: absolute;
}
.video-container .filter {
  z-index: 100;
  position: absolute;
  width: 100%;
}
.video-container .title-container {
  z-index: 1000;
  position: absolute;
  top: 35%;
  width: 100%;
  text-align: center;
  color: #fff;
}
.video-container .description .inner {
  font-size: 1em;
  width: 45%;
  margin: 0 auto;
}
.video-container .link {
  position: absolute;
  bottom: 3em;
  width: 100%;
  text-align: center;
  z-index: 1001;
  font-size: 2em;
  color: #fff;
}
.video-container .link a {
  color: #fff;
}
.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}
.video-container video.fillWidth {
  width: 100%;
}

 

And the HTML

<div class="video-module">
    <div class="video-container">
        <div class="title-container">
            <h1>Video Title </h1>
        </div>
        <div class="filter"></div>
        <video autoplay loop class="fillWidth">
            <source src="path/to/videofilename.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
        <div class="poster hidden">
            <img src="path/to/imagefilename.png" alt="">
        </div>
    </div>
</div>

Just plug both into your webpage where you want the background video and away you go.

Example Work

Here is a random example of some of our work.