The easiest way to create a video background on your website.

I love plugins for jQuery & Angular. A lot of time they take the hassle of writing something trivial out of your application. Lately I've seen a lot of plugins for implementing video as a full website background. They're really nice - but this is a time where I believe they're overkill.

The fact is - you don't need a plugin to accomplish this cool looking feature. You actually don't even need any javascript at all. You can set any video loop as your website background with just a little HTML5 and CSS.

As there isn't very much to the code, I'll provide some slight commentary on the codebase (without javascript!)

body { margin:0; font-family:serif; }

/* our video styles */
.video_bg { position:fixed; z-index:-100; width:100%; }

/* holds our main text & content */
.center { width:100%; text-align:center; }
.main {  padding-top:3em; color:white; font-size:2em; max-width:500px; }
.main h1 { font-size:3em; }

In our css style, it's important that we set the margin of the body to 0. By default most browsers have a small margin. If we ignore this line our video will not appear flush against the browser window. Additionally we need to make sure our "video_bg" class is in a fixed position with the smallest z-index (so that all other elements fall on top of the video).

<html>  
<head>  
  <!-- include css -->
  <link rel="stylesheet" href="style.css">
</head>  
<body>

<!-- video loop -->  
<video autoplay muted loop id="bgvid" class="video_bg">  
<source src="sample.mp4" type="video/mp4">  
</video>

<div align="center">  
  <div class="main">
    <h1>Good Morning Friends!</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut arcu lacus. In sit amet imperdiet purus. Donec ac dolor ac enim luctus pharetra at vitae magna. Phasellus quis odio eu turpis elementum blandit. Proin quis nunc tortor. Nunc velit orci, posuere id scelerisque vitae, venenatis eget ante. Sed id odio pharetra, tincidunt massa vitae, molestie metus. Sed tempus augue dui, id iaculis lacus cursus ut. Suspendisse dui lorem, blandit sit amet tempus eget, pretium vel nibh. Nulla vitae mauris feugiat, ornare nisi sed, iaculis quam. Maecenas varius volutpat mauris vitae tincidunt. Nulla vehicula malesuada quam, vulputate ullamcorper massa lacinia ac.
    </p>
  </div><!-- end main -->
</div><!-- end center -->

</body>  
</html>  

In our basic HTML structure we include a HTML5 video tag and set the appropriate source path and video type. We also are sure to add the "autoplay", "muted", and "loop" attributes to the tag so that the video plays on load, it's muted, and it repeats.

Once you're done, your HTML content should appear over your video:
html over video Thanks to sample-videos.com for providing the video background loop: http://www.sample-videos.com/

You can fork a complete source of this project over on github:
https://github.com/zachalam/html-video-backgrounds

Note: This is part of a older blog post. I have republished it for the benefit of anyone looking to do this!