Creating a hero panel with background video

Creating a “hero panel” with video background

Posted: February 2nd, 2016 | Posted in: CSS, jQuery, Tutorials

Note: This tutorial was originally published in 2016. The tips and techniques explained may be outdated.

Responsive video backgrounds (as featured on the homepage of the current version of this site) are pretty popular at the moment. They’re pretty cool if you want something a bit different from a static hero panel. Here’s how I did mine.

See the Pen A “hero panel” with video background by Gordon Mackay (@gordonmacdotcom) on CodePen.

See the hero panel with video background demo here!

The HTML

I chose to use a <header> as the container for my hero panel, simply because I wanted to contain the branding and main title for my site up there. I then added a further container <div> inside the header to wrap up content of the hero panel:

<header class="heropanel--video">
    <div class="heropanel__content">
         <h1><a href="https://www.gordonmac.com/" rel="home">Gordonmac Dot Com</a></h1>
         <p>A Photography, Web Development &amp; SEO Blog</p>
    </div>
 </header>

The JavaScript

I decided the best option for supporting video backgrounds would be via jQuery. I went with the Vide plugin, after all, anything that claims to be an “easy as hell jQuery plugin for video backgrounds” can’t be bad!

To make Vide work you will need to download the plugin and link both it and jQuery in the <head> of your HTML document:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<script src="jquery.vide.min.js"></script>

You’ll also need to upload a video to your web server to test things with.

Vide works by adding data attributes to the container you want to add the video background to, so add the following to the header tag:

<header class="heropanel--video" data-vide-bg="mp4: /path/to/yourvideo.mp4, poster: /path/to/yourposter.png" data-vide-options="posterType: png, loop: false, muted: true, position: 50% 50%">

Remember to edit “/path/to/yourvideo.mp4” and “/path/to/yourposter.png” to your own video and video poster files.

The CSS

I’ll only provide basic CSS here, because how you choose to style your hero panel is really up to you. In the following example the only thing that’s pretty important is providing some height to the <header>.

.heropanel--video {
    font-family:sans-serif;
    min-height:500px;
}

@keyframes gm-slidein {
    from {
        -webkit-transform:translate3d(0,-100%,0);
        opacity:0;
        transform:translate3d(0,-100%,0);
    }
	
    to {
        -webkit-transform:none;
        opacity:1;
        transform:none;
    }
}

.heropanel__content {
    -moz-animation:gm-slidein 3s 1;
    -ms-animation:gm-slidein 3s 1;
    -o-animation:gm-slidein 3s 1;
    -webkit-animation:gm-slidein 3s 1;
    animation:gm-slidein 3s 1;
    border-bottom:1px solid #FFF;
    margin:0 auto;
    max-width:50%;
    padding:4em 0 2em;
    text-align:center;
}

.heropanel__content h1 {
    margin:0 0 .5em;
    text-transform:uppercase;
}

.heropanel__content h1 a {
    color:#FFF;
    text-decoration:none;
}

.heropanel__content p {
    color:#fff;
    margin:0;
    text-transform:uppercase;
}

Hope this helps!