Discover how to add short video backgrounds using YouTube
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 }
Leave a Comment