Using a movie as a web page background

I implemented this on a web page at home after seeing the technique being used over on paypal.com (or at least something like it). The project eventually led to a rewrite of that page as well as some 8 or 9 year-old css.

The movie in this case was downloaded from Beachfront B-Roll, a very nice source of royalty-free video.

This is really an HTML5-centric solution, so if you need to support obsolete browsers that can’t do HTML5, look elsewhere (see this HTML5 test page for more about that). In my house we’ve upgraded everything to have at least one HTML5 compliant browser (Firefox and Chrome on the Linux and Windows machines, Firefox for Android on the v2.3+ smartphones).

First, the key code to embed in the web page:

<video autoplay loop poster="/images/newhouse.jpg" id="videoBackground" muted="muted">
  <source src="/movies/FallBranch.mp4" type="video/mp4">
  <source src="/movies/FallBranch.webm" type="video/webm">
</video>

Both an .mp4 and .webm file are sourced here, the former for compatibility with Internet Explorer 10+.

The .webm version of the original .mp4 file was created using ffmpeg:

ffmpeg -i FallBranch.mp4 FallBranch.webm

The companion css looks like this:

#videoBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/images/newhouse.jpg) no-repeat;
    background-size: cover;
}
@media (min-aspect-ratio: 16/9) {
    #videoBackground {
       height: 300%;
       top: -100%;
    }
}
@media (max-aspect-ratio: 16/9) {
    #videoBackground {
       width: 300%;
       left: -100%;
    }
}

I found a lot of good advice in Full page video background with HTML and CSS, an article by French web developer and photographer Florent Verscheld. My final css borrows heavily from his work.

While rewriting my css, I decided to implement a simple div framework for the page. This final result was something like this:

<!DOCTYPE html>
<html>
<head>
<title>Casa Lembo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel=stylesheet href="/css/main.css">
</head>
<body>
<video autoplay loop poster="/images/newhouse.jpg" id="videoBackground" muted="muted">
  <source src="/movies/FallBranch.mp4" type="video/mp4">
  <source src="/movies/FallBranch.webm" type="video/webm">
</video>
<header>
    <h2>Casa Lembo</h2>
    <nav>
      <a href="http://lembobrothers.wordpress.com">Lembo Brothers </a>&bull;
      <a href="https://onemoretech.wordpress.com">Onemoretech </a>&bull;
      <a href="http://plembo.wordpress.com">Phil Lembo </a>&bull;
      <a href="http://www.bbc.com/news">Global News </a>&bull;
      <a href="http://www.wral.com">Local News </a>&bull;
      <a href="http://tycho.usno.navy.mil/simpletime.html">Current Time </a></br>
    </nav>
 </header>
 <main>
 <article>
 </article>
 </main>
</body>
</html>

The complete matching main.css looks like this:

header {
	position: absolute;
	left: 0;
	top: 0;
	height: 80px;
	width: 100%;
	background: black;
	text-align: center;
        font-family: sans-serif;
        color: white;
}
header a {
      	color: lightblue;
      	text-decoration: none;
	font-family: sans-serif;
}
header a:visited {
      	color: lightblue;
}
header a:active {
      	color: red;
}
header a:hover {
      	color: white;
      	text-decoration: underline;
}
header h1 {
      	font-family: sans-serif;
      	background-color: transparent;
      	color: green;
      	text-align: center;
	margin: 0;
}
header h2 {
      	font-family: sans-serif;
      	background-color: transparent;
      	color: green;
      	text-align: center;
	margin: 0;
}
header h3 {
	font-family: sans-serif;
	background-color: transparent;
	color: green;
	text-align: center;
	margin: 0;
}
main {
	position: absolute;
	left: 0;
	right: 0;
	top: 80px;
	bottom: 80px;
	text-align: left;
	font-family: sans-serif;
   	background-color: transparent;
	color: black;
}
main  a {
	  color: blue;
	  text-decoration: none;
	  font-family: sans-serif;
}
main a:visited {
	  color: purple;
} 
main a:active {
	  color: red;
}
main a:hover {
	  color: red;
	  text-decoration: underline;
}
main h1 {
	font-family: sans-serif;
	background-color: transparent;
	color: green;
	text-align: center;
}
main h2 {
	font-family: sans-serif;
	background-color: transparent;
	color: green;
	text-align: center;
}

main h3 {
	font-family: sans-serif;
	background-color: transparent;
	color: green;
	text-align: left;
}
article {
    position: relative;
    left: 0;
    right: 0;
    text-align: left;
    font-family: sans-serif;
    background-color: transparent;
    color: black;
    padding-left: 20px;
}
article  a {
      color: blue;
      text-decoration: none;
      font-family: sans-serif;
}
article a:visited {
      color: purple;
}
article a:active {
      color: red;
}
article a:hover {
      color: red;
      text-decoration: underline;
}
article h1 {
    font-family: sans-serif;
    background-color: transparent;
    color: green;
    text-align: center;
}
article h2 {
    font-family: sans-serif;
    background-color: transparent;
    color: green;
    text-align: center;
}
article h3 {
    font-family: sans-serif;
    background-color: transparent;
    color: green;
    text-align: left;
}
footer {
     position: absolute;
     left: 0;
     bottom: 0;
     height: 80px;
     width: 100%;
     background: black;
     text-align: center;
    font-family: sans-serif;
    color: white;
}
footer a {
      	color: lightblue;
      	text-decoration: none;
	font-family: sans-serif;
}
footer a:visited {
      	color: lightblue;
}
footer a:active {
      	color: red;
}
footer a:hover {
      	color: white;
      	text-decoration: underline;
}
footer  h1 {
      	font-family: sans-serif;
      	background-color: transparent;
      	color: green;
      	text-align: center;
	margin: 0;
}
footer h2 {
      	font-family: sans-serif;
      	background-color: transparent;
      	color: green;
      	text-align: center;
	margin: 0;
}
footer h3 {
	font-family: sans-serif;
	background-color: transparent;
	color: green;
	text-align: center;
	margin: 0;
}

sidebar {
    	position: absolute;
    	top: 0;
	bottom: 0;
	left: 0px;
    	width: 175px;
    	background: black;
        padding: 10px;
	text-align: left;
        font-family: sans-serif;
        color: white;
}
sidebar a {
        color: lightblue;
        text-decoration: none;
        font-family: sans-serif;
}
sidebar a:visited {
        color: lightblue;
}
sidebar a:active {
        color: red;
}
sidebar a:hover {
        color: white;
        text-decoration: underline;
}
sidebar h1 {
        font-family: sans-serif;
        background-color: transparent;
        color: green;
        text-align: left;
}
sidebar h2 {
        font-family: sans-serif;
        background-color: transparent;
        color: green;
        margin: 1;
}
sidebar h3 {
        font-family: sans-serif;
        background-color: transparent;
        color: green;
        text-align: left;
}
#videoBackground {
    position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
    background: url(/images/newhouse.jpg) no-repeat;
    background-size: cover;
}
@media (min-aspect-ratio: 16/9) {
	#videoBackground {
	   height: 300%;
	   top: -100%;
	}	
}
@media (max-aspect-ratio: 16/9) {
	#videoBackground {
	   width: 300%;
	   left: -100%;
	}
}

Here’s the obligatory embed of my favorite background video:

This entry was posted in Development, Web on by .

About phil

My name is Phil Lembo. In my day job I’m an enterprise IT architect for a leading distribution and services company. The rest of my time I try to maintain a semi-normal family life in the suburbs of Raleigh, NC. E-mail me at philipATlembobrothersDOTcom. The opinions expressed here are entirely my own and not those of my employers, past, present or future (except where I quote others, who will need to accept responsibility for their own rants).