Official website for Web Designer - defining the internet through beautiful design
Author: Steve Jenkins
12th April 2013

Create a fullscreen video background

Discover how to add short video backgrounds using YouTube

Create a fullscreen video background


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 }

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • daniel dickson

      More application and files

    • Chris

      Thanks for sharing such an informative step with us.I am going to try this full screen video background.

      Develop Business Website

    • Pingback: Web Design Video Tutorials

    • Pingback: http kesilconsulting com web designer magazine html video… | Kathys LinkBook

    • gender prediction

      My buddy encouraged I’ll in this way blog. He or she used to be 100 % proper. This particular blog post truly built our day time. You are unable to visualize just that the lot moment I did expended in this information! Thanks a lot!

    • dan

      it dont work

    • G

      Do you have an example somewhere on the web?
      Thanx for sharing

    • Hugo Tabares

      what minimum size/resolution the video needs to be?