Hippe video background

Zie meer info op deze website

<video autoplay loop poster="filmpje.jpg" id="bgvid">
<source src="filmpje.webm" type="video/webm">
<source src="filmpje.mp4" type="video/mp4">
</video>

Important: the order of the video files is vital; Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else. The poster image will be replaced by the first frame of the video once it loads, so it makes sense to derive that image from the same first frame. To make the video fullscreen:

video#bgvid { 
     position: fixed; /*kan ook absolute, scrollt dan  mee*/
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -100;
     -webkit-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
     background: url(filmpje.jpg) no-repeat;
     background-size: cover; 
     }

Older browsers will use the background-image for the element, using the same placeholder picture.

h1 {text-transform:uppercase;
	letter-spacing:3px;
	font: 40px normal 'Helvetica Neue';
	padding:20px 40px;
	margin:0 15%;
	border:2px solid black;
	text-shadow:0px 0px 20px white;
	text-align:center;
}
body {
	padding:200px 100px 0 100px;
}
#main {
	margin-top:500px;
}

At this stage only Safari (mobile and desktop) requires the -webkit vendor prefix for transforms, so it has been included in the code; if you're also targetting Firefox 15 or earlier, you'll want to include a -moz prefixed version of the transform.