Dynamic Blox

A Web Design Resourse

Breadcrumb Section

fullscreen video background

Video Background

May, 03, 2014 | CSS,HTML

The video background is not a new feature on the web, I began seeing this as far back as 2008 with the use of the Adobe Flash. Today, I have a simpler solution that requires no plugins, no proprietary software or the use of Javascript on the authors end.

All that is required to accomplish this effect is a little bit of CSS; a small video file (no more than 20MB), formatted for mp4, webm and ogv. The one that I am using for this demo has a 1280(px) by 720(px) dimension. However, this does not really matter. What is of great importance is the file size, you do not want to try this with a video that is greater than 20MB. All three of my video files are around and under 16MB and I still experience some lag time. Below, you will find the CSS.

 #container{position: relative; width:100%; height:100%; float: left; margin:0px; padding: 0px; 
 background: #222; z-index: -99;
}

#container video#bgv {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: #222;
background-size: cover;
}

As you may have already notice, the container (#container) for the video files is positioned relative and video along with it’s specific ID (#bgv) is in a fixed position. The video background will remain in place even it you resize the browser or have to scroll. for elements such as “z-index” or “background-size”,  you can visit the W3C site for more detail information. Now, lets view the HTML.

</head>
<body>

<div id="container">

<video preload="auto" autoplay muted loop id="bgv">
<source src="porsche.mp4"  type="video/mp4">
<source src="porsche.webm"  type="video/webm">
<source src="porsche.ogv" type="video/ogv">
</video>




     <section id="mainWrap">


          <header id="header">
             <h1>Full Screen Video Background</h1> 
           </header>

          <article id="contentArea">
             <div class="box">
               <video preload="none" controls poster="adriana_lima.png" width="100%" height="auto" id="boxed">
               <source src="porsche.mp4"  type="video/mp4">
               <source src="porsche.ogv" type="video/ogv">
               <source src="porsche.webm"  type="video/webm">
              </video>
             </div>
             
             <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
             
          </article>

       

          <footer id="footer">
              <h2>Pure CSS on my end, the browser does the rest... <br>This example will not work on older browsers without the use of Javascript...</h2>
          </footer>

          <div class="clear"></div>

     </section>
  
  </div>

</body>

</html>

 

The background video is set to “loop” and “muted”. I also removed to controls for the maximum effect. Some individuals might tolerate an animated background, but audio is a definite “No! No!”

Testing Different Browsers

I decided to experiment a little by adding the same video file in the content area of the web page. The results were interested; in Firefox 28.0 and 29.0 the video background and content video player worked seamlessly. In Safari 7.0.3, the background video worked fine, but the content video player did not play right away once I clicked the play button. I purposely set it not to preload. Google Chrome 34.0.1847.131 had the longest delay time for the content video player and the background video (which are the same files). Keep in mind that I am not using any form of Javascript on my end for this demo. Several years ago I ran into the same issue when I tried implementing HTML5 videos in a tutorial for Responsive Videos. Chrome simply would not cooperated.

BTW: there are a number of other solutions for this effect that requires Javascript. You can find a tutorial at  Pupunzi.open-lab and Codrops. My demo is by far the easiest to implement.

View Demo

The Great Banda...

I dream in code, find conformity repulsive and drink excessive amounts of coffee…

4 Responses to “Video Background”

  1. Darius

    May 7, 2014

    Isn’t better to use a video hosted on youtube or Vimeo to help with the bandwidth on your server?

    • Mr.Blox

      May 8, 2014

      That is true, you can check out Pupunzi.open-lab for that solution.

  2. Robby-O

    May 7, 2014

    Seems like performance will constantly be an issue