Chat with us, powered by LiveChat

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:

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

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 {