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?

How to make your own video header background 4.415 (88.13%) 32 votes
Share
This article was first published January 22nd, 2015
  • This for WordPress Creative template .

    Install Video Background plugin , I wants to place different video in different page. So this plugin will do it easy.

    In bottom of post/page
    Container = .gk-page-wrap
    and set your mp4 ,webm and image or youtube video.

    And need to add flowing css , instant of this article css. (using JP Custom CSS plugin).

    /* ———————————– Edit CSS ————————————- */
    .gk-body {
    background: transparent none repeat scroll 0 0;
    }

    .gk-page {
    background-color: rgba(255,255,255,0.9);
    }

    .widget-area {
    background: transparent none repeat scroll 0 0;
    }

    /* ———————————– End of CSS ————————————- */

  • Ronald

    Great info. But what about video headers and seo?

    Content Size: Total content size is greater than 1 MB (4.71 MB). Try to keep your page size below 250 KB, and definitely below 1 MB. Importance *** / Good to Solve

    That is very hard with a one page theme and a video header. :-) Even if you use a program like handbrake to make the video smaller, your site will be slower and very heavy.

    Any tips on that issue would be great.

  • Sulkor

    Hi,
    It seems i have to put some height to the bg-header or what?
    If not the video doesnt display….
    But i need to adapt that height to the height of the video and i dont know how….
    Thank you if you can help
    S

  • Daniel Florez

    What about Joomla ? If you sell templates in joomla should be explain how to do it in joomla too.
    Thank you

  • Nitesh Saini

    How can we adjust the height of the background video with effecting the width.

  • Piotr Kunicki

    Hi, I’ve answered you on the forum.

  • Rizsa

    This option is working to the joomla steakhouse template too? Thanks

    • Piotr Kunicki

      No, it’s generally for the WordPress version, probably with some adjustments may be used also with Joomla (use layouts/default.php file instead of header-frontpage.php and other css selectors).

      • Rizsa

        Thanks your answer, i try it..

        • Martinneke

          You’ve managed to get this working for Joomla! too?

  • Art

    Nice article :) but what about video BG and IOS?!

    • Piotr Kunicki

      Thanks, video BG on mobile devices (especially IOS) may be a subject of another article. Good idea is to use media queries; hide the video on mobile devices and add image background to #gk-header, something like:

      @media (max-width: 700px) {
      #gk-header { background: url(image.jpg) #000 no-repeat center center; }
      #bg-video { display: none; }
      }

      • +1 for Piotr’s answer. Autoplay of any type media is disabled on iOS and requires action from the user to start.

      • Joerg Wigger

        Really nice so i added this to a customers hp: http://asados.at/?lang=en … works very nice but i cant see any image on mobile devices … video is OFF under 700 px

        i added this to style.css:

        @media (max-width: 700px) {
        #gk-header { background: url(http://asados.at/wp-content/uploads/video720.jpg) #000 no-repeat center center; }
        #bg-video { display: none; }

        Add: i changed line 32 from:
        <header id="gk-header" role="banner" style="background-image: url('’);”>
        to:
        … without any changes …

        Ups: image is “struck out” ” please see screenshot … http://ge.tt/3yavay92/v/0?c

        Secondly … on Chrome i have a little gray “banner” below the video .. please look to in different Screen Resolutions …

      • Joerg Wigger

        someone deleting posts here?