Background Video with CSS

The YouTube Fan Fest website is a good example of a web page that uses background video to add life to an otherwise boring page. The HTML5 video autoplays in the background in a loop. The video is however hidden when the website is viewed on a mobile device and a static background image is used instead.

Here’s the HTML code:

 <body>
    <video id="bgVideo" autoplay loop poster="image.png">
      <!-- Video is embedded in the WEBM format -->
      <source src="video.webm" type="video/webm">
    </video>
  </body>

The site uses CSS media queries to hide the video element on mobile devices (device width < 768 pixels).


<style type=”text/css”>

video#bgVideo {
  position: absolute; // Play the video in full screen mode
  top: 0px; 
  left: 0px; 
  min-width: 100%; 
  min-height: 100%;
  z-index: -1; // Put the video behind all other elements
}

@media only screen and (max-width: 768px) {
  video {
    display:none;
  }
  body{
    background-image:url(“image.png”);
  }
}
</style>