How to: CSS / HTML 5 Fullscreen Video Background + Bootstrap integration

February 25, 2017 , ,

Video backgrounds are something we see more and more all over the web and can be a great way to improve your website’s look, making it more appealing to your visitors. This article will be trying to teach you how to add your video background using simple code and also share with you an extra snippet of how to do it using Twitter Bootstrap 3.

The idea is to have the video covering all the background like an image. The problem is that is not possible to use CSS rules like background-size: cover because this rule only accepts images, so we’ll have to find another way.

Before starting, please take in consideration:

  • Use a video background is it’s really going to improve your site’s look and feel in a positive way. It’s very easy to get lost in fancy stuff and make your site slower and less easy to navigate;
  • Choose a video that is short in length and small in size. You want it to load quick and to enhance your site. If you want your users to see the Lord of the Rings, link to Youtube.
  • Don’t use sound. Really. Just don’t. It’s makes your video heavier and adds no value. If you can’t take off the sound of the video you want to use, apply the property ‘muted’ (the example below uses it).
  • Use a placeholder. If the video is stopped or can’t be played, at least an image will be shown.

The HTML Code

This is the relevant HTML Code for the case. It uses the property <video> that is not IE8 compatible, but hey, nobody uses it today, right?

	<video autoplay loop muted poster="screenshot.jpg" id="background">
		<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
	</video>

The CSS Code


#background {
    position: fixed;
    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(polina.jpg) no-repeat;
    background-size: cover;
}
.container h1 {
    color: white;
}

Bonus – Twitter Bootstrap integration

If you use Bootstrap, here’s an already integrated snippet for you to quickly get up and going:

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>title</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	</head>
<body>
	<video autoplay loop muted poster="screenshot.jpg" id="background">
		<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
	</video>

<div class="container">

<div class="row">

<div class="col-md-12">

<h1>www.viewlike.us</h1>

			</div>

		</div>

	</div>

</body>
</html>

Working Demo: Codepen.