How to create a fullscreen video background

inspiration: barrelny.com/recap/2012

Barrel is a digital agency from New York, and like many agencies it enjoys showing off its design and development skills. The 2012 Recap element of the site, chosen here, uses a full screen video background.
The selected video clip shows an everyday scene at the agency to help emphasis who and what they are. The short clip runs on a loop simply repeating at the end of the clip. The length of the clip is around 30 seconds, but it is the size that is a more important consideration. The bigger a clip the longer it will take to load, so keeping it short/small will help to ensure a more enjoyable user experience.
There are various options for creating a video background. There is the more bespoke option of using Video.js or BigVideo.js for one thing. Alternatively, for those who do not have the video they want, a video from YouTube can be implemented.

Big div

The first step is to create a div to contain the video. This will have a height of 100% and a width of 100%. Add a new div tag, < div id=”bigvid”>< /div>, to the body and name it accordingly. Add a comment to the closing tag for future reference.

001 < div id=”bigvid”>

text will go in here

002 < /div> 

Go fullscreen

Save the page and preview in your preferred browser. The video will currently have a space around it – set the body tag to 0 padding and margins. Even though the video is set to 100% on both height and width, only the width is currently observing the width value. Add position:absolute to the video container CSS to resolve.

001 #bigvid {
002 position: absolute;
003 background-color: #000;
004 height: 100%;
005 width: 100%;
006 }

Add an overlay

To overlay a div tag over the video the div needs to be positioned using the absolute value. Add a new div tag and name appropriately. Now set the width and height to 400px and set position to absolute. Add a background colour, but make sure that it is one that complements the background video.

001 #start
002 {
003 position: absolute;
004 width: 400px;
005 height: 400px;
006 z-index: 1;
007 background-color: #000;
008 }

Styling and centring

To make the div created in the previous step a circle, the border-radius property is to be used. Add border-radius and set to the width of the div tag to 400px. To position the circle, first add top: 30%. To centre the circle add left: 50%, and margin-left to half the width with a minus value, -200px. Finally add some padding and text.

001 #start
002 {
003 position: absolute;
004 width: 400px;
005 height: 400px;
006 z-index: 1;
007 background-color: #000;
008 border-radius: 400px;
009 top: 30%;
010 left: 50%;
011 margin-left: -200px;
012 }