News

How to use overlay effects on background video

HTML5 video is currently supported in over 80 per cent of browsers so here we integrate it into designs with a variety of creative effects

How-to-use-overlay-effects-on-background-video

How to use overlay effects on background video

Support for HTML5 video is almost ubiquitous now and we can start to fully explore all that this offers to us as designers. This issue we are using video as a background element for a page design.

As you may be aware, CSS doesn’t allow you to add video as a background element so we have to add a little CSS to make this a fixed element in the background of the design. This offers some opportunities to use a variety of textures, gradients and text effects over the top of the video, which will allow the video to form interesting breaks between sections of the page.

This effect is perfect for one-page websites, as video takes a while to load, what with it being considerably larger than an image background. By adding it to a one-page website you will only need to load it once for your site – that said, it should cache after the first load.

The video also provides interesting background for quotes or other content that you want to draw attention to, as it will have a motion background behind it. The effect works best when there is subtle movement in the background, but we’ve added quite a fast-moving background to draw emphasis to what we are doing.

DOWNLOAD TUTORIAL FILES

Start the project

From the resource CD, copy the Start Folder to your desktop and open the file ‘index.html’ in a code editor. In the head section, add the two lines of code shown below. These add a ‘normalize’ stylesheet for resetting all elements for cross-platform display and the Google font that we will use in the design of the menu.

001 <link href=”normalize.css” rel=”stylesheet” type=”text/css”/>
002 <link href=’http://fonts.googleapis.com/
css?family=Amaranth:400,700’ rel=’stylesheet’ 
type=’text/css’> 

Add the video

As you will see, the index page already has some content in there. We are primarily concerned in this tutorial with adding visual effects and styling using CSS. However, we need to add our video to the body of the page, so add the code below immediately after the opening body tag. After adding this, your page will merely have video placed at the top of the document.

001  <video autoplay loop>
002    <source src=”loop.mp4” type=”video/mp4”>
003    <source src=”loop.webm” type=”video/
webm”>
004    <source src=”loop.ogv” type=”video/ogg”>
005 </video> 

CSS to the rescue

First we need to just set up the headings and body content to have the correct typeface and colours. Move back into the head section of the document and add the CSS style tags. All the code for the rest of the tutorial will be placed before the closing style tag.

001  <style>
002 h1, h2, h3, h4, a { color: #636; font-
family: ‘Amaranth’, sans-serif;}
003 body {
004    color: #555; 
005       font-family: “HelveticaNeue-Light”, 
“Helvetica Neue Light”, “Helvetica Neue”, 
Helvetica, Arial, “Lucida Grande”, sans-serif; 
006    background: url(images/bg.jpg) #000 no- repeat center center fixed; 
007 
008    -webkit-background-size: cover;
009 }
010 
011 </style> 

Video background

With the following code shown below, we turn the video into a background by fixing the video into position. The video is positioned in the top-left corner of the browser; we also set the video to fill the browser with the minimum width and height settings and move the video behind any other content with the z index. Refresh your browser so you can see this in action.

001 video{
002     position:fixed;
003     left:0;top:0;
004     min-width:100%;
005     min-height:100%;
006     width:auto;
007     height:auto;
008     z-index:-100;
009     visibility: visible;
010 }
011 

Style the logo

We are now going to create our logo, which will be designed entirely using CSS. The first part of this is to set the width and height of the logo. We set this to be centred on the page and also make the border radius 50%, which turns the <div> into a circle. In order to see this, we need to add a background image, which is semi-transparent stripes, allowing the video to be seen behind.

001  #logo{
002     width: 320px; height: 320px;
003     margin: 80px auto;
004     padding: 20px;
005     text-align: center;
006     border-radius: 50%;
007     background: url(images/thick_stripe.
png);
008 }

Vertically centring

We are now going to centre the text vertically. To do this, we need to tell the browser to render the content as a table with a set height and width. Add the code as shown which applies this to the <div> with the id of ‘vCent’ (short for vertical centre).

001 #vCent{
002     display: table;
003     height: 320px; width: 320px;
004     overflow: hidden;
005 }

Vertically centred

The previous step doesn’t completely solve the problem of the vertical centring, however, because we have just set it to behave like a table. Now we tell the content inside, which is the heading 1 tag, to act like a table cell. This now allows us to add a vertical align of ‘middle’ to this and we get the look that we are trying to achieve. Refresh your browser to see it in action.

001 #vCent h1{
002        font-family: ‘Amaranth’, sans-serif;
003        display: table-cell; vertical-align: 
middle;
004     font-size:5em;
005     letter-spacing:.02em;
006        line-height: .8em;
007        color: #636;
008    }
009    

Create the strapline

Underneath the logo we plan to have a strapline that tells people exactly what the ‘VDO’ site is and who it represents. The strapline class sets up the typeface to stand out against the background, but what will also help is if we put a tiled image that is transparent in the background. We add an ‘x’ pattern as a transparent PNG.

001 .strapline{
002        padding: 20px 0;
003        color: #fff;    
004        font-size: 2.5em;
005        font-family: ‘Amaranth’, sans-serif;
006    }

Centre the text

Now our text is really beginning to stand out against the background, we just need to centre the text on the screen. By having this as a separate class, we can add it several times to other dominant text so that it becomes reusable in other contexts. Add the code shown and refresh your browser to see the result.

001 .cntr{
002        margin: 0 auto;
003        width: 95%;
004        max-width: 960px;
005        line-height: 1.6em;
006    }

Side view

We are now going to put more emphasis on the text by adding a borderline at the top and bottom of the text – this also has the added appeal of increasing the space around the text. By doing this we get to add an extra padding at the bottom of the line, which will help to keep this content separate from what comes next.

001 .lines{
002        border-top: 2px solid #fff;
003        border-bottom: 2px solid #fff;
004        padding-bottom: 10px;
005    }

Readable text

One of the main problems with the design of the page is that all the content is largely unreadable because of the video in the background, so we will address this now by making a class called ‘white’. This will create visible text with a white background colour. While we will not be able to see the video, we can use this to create visually interesting video spacers between sections.

001 .white{
002        background: #fff;
003        padding: 40px 0;
004    }

Style the link

We have added a link for the Creative Commons-sourced video background that we have used, so we need to make that link stand out. Here we add a background colour of purple and change the text colour to white. We also add in a transition property so that we can create our rollover transition as well.

001 a{
002        display:inline-block;
003        color:#fff;
004        text-decoration:none;
005        background: #636;
006        padding:.5rem;
007        transition:.3s background;
008    }
009    

Rollover transition

Here we’re going to add a different colour background for the hover effect in this tutorial. All this involves is changing the background colour to a darker purple, giving the user the impression of more emphasis as they roll over the link. Save your work now and refresh your browser so that you can  see all the updates.

001 a:hover{
002        background:#303;
003    }

Horizontal rules

The default look of the horizontal rule harks back to when interfaces had a chiselled-edge look. This doesn’t look that great now, so we make the rule 1px high with a plain colour. This gives the horizontal rule a better look.

001 hr {
002        height:1px; 
003        background-color:#ddd; 
004        border:none;
005    }

Rule of thirds

We are going to style the text that appears further down the page into three columns, so we add the third class as shown here. When any content is floated to the left, the next content doesn’t sit in the right position unless it clears the floated content. This is solved by creating the class ‘clearfix’, so it clears the other content.

001 .third{
002        float: left;
003        width: 30%;
004        padding: 0 1.5%;
005    }
006    .clearfix{ clear: both; } 

Create spaces

In this step we will add a space between the initial intro text and the ‘About’ section of the design. This adds an interesting space for the video to show through and this can be used to surprise the user with the video background. By not allowing the entire video to show through, it creates good visual interest.

001 .spacer { min-height: 240px; }
002    .dark_bg { background:rgba(0,0,0,0.5); }
003    .smll { font-size: 0.8em;
004        color: rgba(255,255,255,0.5);
005    }

Fold it up

In our previous step we also created a dark space with a semi-transparent black background for the quote. Now all we do is add a responsive class for the images and also add a small space between other sections of content. Preview this in your browser to see the sections starting to be more clearly defined.

001 .respond {
002        max-width: 100%;
003    }
004    .small_spacer { min-height: 120px; }

Click the cube

Now we add a background that incorporates an image and a semi-transparent gradient, as this still allows the video to show through slightly. Whatever is the first element in the background will be the top-most background – in this case it’s the gradient. We are only adding the WebKit prefix for brevity.

001 .thin_bg{ 
002        background: -webkit-
gradient(linear, left top, left bottom, 
color-stop(0%,rgba(55,55,55,0.9)), 
color-stop(80%,rgba(55,55,55,0)),color-
stop(100%,rgba(55,55,55,0.3))), url(images/
thin_stripe.png);
003    }

Fix the image

Here we are adding just a small fix to make the image float to the right. We are also scaling the image down so that it will fit comfortably into small-screen browser windows. This is a good use of the space and allows other graphics not to take over with having such bold areas of visual interest elsewhere.

001 .about-img
002 {
003        max-width: 360px;
004        display: block;
005        float: right;
006    }

Dark gaps

Further down the page we are going to add another gradient into the space just before the footer section. The footer will be darker, so we’ll position the gradient to get darker at the bottom. We also combine the gradient once again with an image tile – but this time the image is a repeating dot pattern.

001  .dark2_bg {
002        background: -webkit-gradient(linear, 
left top, left bottom, color-
stop(20%,rgba(45,45,45,0)), color-
stop(100%,rgba(45,45,45,0.8))), url(images/dot.
png);;
003    }

Add the footer

The last part of the general code is to add the styles for the footer. The footer features a darker-coloured background, so the text has to be lighter over the top of this to be more visible. As a result, we’ve added styles for the paragraph and heading 2 tag to be lighter. Save the document and preview in your browser.

001 .dark{
002        background: #222;
003     padding: 40px 0;
004 }
005    .dark p, .dark h2{
006        color: #999;
007    }
008    

Final step

The final element we need to add is the changing of the sizes of various elements when being viewed on a smaller screen. Here we also turn off the visibility of the video element because some mobile browsers bring the video to front before allowing it to play, so it’s safer to just remove it. Save and test for the final time – and that’s it!

001 @media screen and (max-width: 768px) {
002        video{ visibility:hidden;}
003     #logo{width: 200px; height: 200px; 
margin: 30px auto;}
004     #vCent{width: 200px; height: 200px;}
005        #vCent h1{font-size:3em;}
006        .strapline{font-size:2em;}
007    }

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×