News

Create a fullscreen video background

Discover how to add short video backgrounds using YouTube

Full screen 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 }
×