How to make your own video header background

I've recently noticed that video backgrounds are becoming very popular among new websites. Images can be a great draw, but videos have that extra factor, an original, unexpected element, that makes them stand out. It’s a good alternative to image sliders, and one short video may be more valuable and engaging than several images. Not to mention that quite a lot of our users in the forum have been wondering if a video background is possible in our themes. So, in today’s article I’ll be doing my best to explain how you can get a nice video header without too much hassle.

Introduction

Header with Video Background For our example I'll be using our Steakhouse theme; it’s relatively new, very popular, and it seems to have been the subject of more video header requests than others, so we’ll save people a trip to our forum or support ticket system! In the basic setup of the theme the header displays an image as decided via the Theme Customizer; you can use random images here, or rotate your header images slider in real time, but it's not possible to add video here by default. So, let's code ourselves a solution!

Methods for adding a video background

If you’re looking to have a video background across your website and not just limited to the frontpage header, then re-coding things by hand is not really worth it since there are some great plugins for just this purpose, such as YT Player for background videos. Configuration of this plugin is easy, but it can't be used with all our themes. For simpler background videos there are a few methods we can use.

Use an iframe to display video from popular services

Services like Youtube, Vimeo etc…allow their videos to be displayed in an iframe. (Please remember to check the license of the movie clip you wish to use; avoid copyrighted material and ensure you have permission from the uploader if necessary). Once you’ve found a video you should click on the "share" button to get the iframe code ready to add to our own site. For the video to work, we’ll need to add this code into our Steakhouse/header-frontpage.php file inside the header, after this line:

<header id="gk-header" role="banner" style="background-image: url('<?php header_image(); ?>');">

Our added code should look like this:

<iframe id="video-bg" src="//www.youtube.com/embed/k0wTHj1zAOY?rel=0" frameborder="0" allowfullscreen></iframe>

We can additionally add these parameters to the embedded code

&amp;autoplay=1&amp;controls=0&amp;loop=1

to play the video automatically, disable video controls and enable playing the video in the loop; all very important if you want an uninterrupted background video.

Once we refresh our site you’ll see that video is visible, but only in a small container before the header. If we’re going to make this into a seamless video background we’ll need to do some CSS styling.

We can use the Steakhouse/css/override.css file or the method discussed here to add our own CSS code to the theme.

First we have to set background of our #gk-header and #gk-bg to transparent – This will make our video visible. Then we have to position our video container absolutely with the proper (negative) z index property for best effect.

#gk-bg {
  background: transparent;
}

#gk-header {
	background: transparent!important;
	overflow: hidden;
}
#video-bg {
	height: 100%;
    position: absolute;
    width: 100%;
    z-index: -1;
}

Upload and use your own video.

If you have your own video to use, rather than a video from a service like Youtube, then the first thing you’ll need to do is upload it to your media library. After that you can edit this video to check and copy the full path to the uploaded file. Now, find the place where our header is displayed. Navigate to your Steakhouse/header-frontpage.php file and add your video into the header – the same place as in the method above, but with a different bit of code:

<video autoplay loop poster="cookies.jpg" id="bg-video">
	<source src="https://our-website/wp-content/uploads/2015/01/cookies.webm" type="video/webm">
	<source src="https://our-website/wp-content/uploads/2015/01/cookies.mp4" type="video/mp4">
</video>

We can also upload an image and specify the poster attribute which will be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.

Now our video will be visible but only in the small container before the header (just like after adding the iframe in the previous section), if we want to have this video as a background we’ll have to do the CSS thing again like before.

First we have to set background of our #gk-header and #gk-bg to transparent to give the video some space to breathe and let your users see it, then we have to position our video container absolutely with a (negative) z index property.

#gk-header {
	background: transparent!important;
	overflow: hidden;
}

#gk-bg {
	background: transparent;
}

#bg-video {
	background: url('poster.jpg') no-repeat;
	background-size: cover;
	position: absolute;
	width: 100%; 
	height: auto;
	z-index: -1;
}

Now the effect should look like this:

Steakhouse with video header

And that’s your lot for today; go forth and add video backgrounds till your heart’s content! I hope this article was helpful, and if you’ve got any interesting suggestions, why not let us know in the comments below?