If you haven't seen it already, we've recently updated our home page to include a rather nice video of Eastbourne Pier.

A new feature which we have worked on for our site to see if we could get the idea to work with our CMS and with Video we shot. We hope that you'll agree that it looks rather good. Here I'll explain how we did it.

[Edit]
We have recently removed the video from the home page. You can view our copy of it with the video here.

Sourcing a video

First we experimented with some video we had on from personal collections. You can see our first background test demo, its not a fully working version, so don't expect mobile devices and every browser to work, but chrome does.

Once we had managed to prove we could get it to work, we went about planning what sort of video we could display on our website to enhance to visitors experience, which is key. There is no point just placing in video just because you can. It has to have a point, has to be relevant, and has to enhance the visitors experience of your site, and not get in the way.

We wanted something local to BarkWeb, so we took a stroll down to Eastbourne Seafront, with a decent camera capable of HD video. Don't worry about sound as we strip this out later. A tripod is also useful for these type of videos as we'll be looping one.

A seagull in Eastbourne named Steven

Converting video for the web

Firstly, you need to source a video, once you have done that, you need to convert them to MP4, OGG, and WEBM formats. You need these different formats so that you can cover as many web browsers and devices that support them as possible.

You also need an image to display in case video support isn't available.

We first cut the video using Premier Pro then used VLC to convert our AVI and MP4 videos to the various versions we required. VLC is free.If your recording the footage yourself, most devices come with software which will allow you to edit and crop your video. A quick Google search for alternatives will be the easiest way if the above options are not available or don't work on your platform.

The YouTube video below talks you through creating each video type using VLC.

Basically you'll need the following profiles:
Video - H.264 + MP3 (MP4)
Video - VP80 + Vorbis (Webm)
Video - Theora + Vorbis (OGG)

Make sure you untick the audio option as we want to remove it as its annoying to have on a website that loads and will reduced the file size by taking it out.

Inserting HTML and CSS

Once we have everything we need, we insert the following code into our HTML, where we want the video to appear. Change the paths and titles to suit you. The poster is the alternative image for when Video doesn't play. You can see that we have it set to loop and autoplay.

<div class="banner">
    <video autoplay="autoplay" id="bgvid" loop="loop" poster="post_image_path.jpg" title="Title">
        <source src="video_path.webm" type="video/webm" ></source>
        <source src="video_path.mp4" type="video/mp4" ></source>
        <source src="video_path.ogg" type="video/ogg" ></source>
    </video>
</div>

The order the sources (videos) are displayed is the order in which the browser tries to play them. MP4 was juddery for us, which other tutorials say to put first because iOS devices only check the first source, and can only play MP4. But without more work, it didn't play on iOS for us by default (as other sites using video backgrounds, so we ignored it and just replaced it with the poster image, and put the .webm video first because it was smoother on desktop browsers.

We wrap it in the div with the banner class for the iOS issues and fix we talk about below.

Below is the CSS that we need to add which positions the video just like background cover works. Making it cover the whole space. Unfortunately is doesn't shrink the image when the browser gets smaller. If your getting positioning issues, make sure any parent wrapper has position set to relative. You can also adjust the top, right, left, bottom positions and margins to suit your needs.

#bgvid {
    position: absolute; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: 0;
    background: transparent url(poster_image.jpg) no-repeat;
    background-position: center center;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

The above code should have your video working, as we have, albeit with some minor adjustments.

Non Video and iOS issues

On most screens, video played well. And on the Android devices we tested, the poster image appears as we would have expected.

iOS devices on the other hand, seemed to try and take a snapshot of the video and resized it to fit the area, meaning that we got black sides, as shown in the below image.

As mentioned above, we wrapped the video tags inside a banner div. This allows us to assign an image to it and set its size as cover. We can then hide the video element for certain devices based on the exact screen site, while trying to check that it is a mobile device.

Below is the CSS we added, the media part being important because it contains the sizes of iOS devices, but the styling inside is the same for each one, setting an image as cover, and hiding the video element (#bgvid)

/*  most mobile devices  */
@media screen and (max-device-width: 800px) {
    .banner { background: transparent url(poster_image.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    #bgvid { display: none; }
}
/*  fix ios background images  */
/* ipad mini */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    .banner { background: transparent url(poster_image.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    #bgvid { display: none; }
}
/*  ipad landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .banner { background: transparent url(poster_image.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    #bgvid { display: none; }
}

/*  ipad portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    .banner { background: transparent url(poster_image.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    #bgvid { display: none; }
}

/*  iphones */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .banner { background: transparent url(poster_image.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    #bgvid { display: none; }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
    .banner { background: transparent url(poster_image.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    #bgvid { display: none; }
}

Alternatives

http://easyhtml5video.com/ - Did the job, but the free one added text as a watermark, didn't really want to pay for the upgrade, and added alot more to the code which we feel bloated it and couldn't work out if all of it was necessary.

http://dfcb.github.io/BigVideo.js - This was probably the closest we came to find what we wanted. But again come with more than what we really wanted. But should we want to cover more devices, really go full screen on responsive video or provide this option on our CMS, this is probably what we'll use.

Conclusion

There are some sites out there that use video backgrounds really well. fernando.is/all-about/ and paypal.co.uk are just two of them. With faster broadband, and high quality video recording available on most devices now, it looks like this might become more common place on websites. But high quality video, as with images currently, are a must for this technique to work well.

There are plugins out there that will do some of the above for you. And you could probably use a few addons to provide better support for mobile devices. But most options we tried come with extras that we didn't really need, or was missing something that we wanted to add in, and found it easier to start from scratch.

We managed to find and fix some issues, which we will know about in future sites. We are pleased with our results and are already looking at new video ideas to add to our current Pier video.

Sources

We used the following pages in our research, and have used options from everything we have learnt to make our own version detailed in the instructions above. We recommend them as good resources when looking into video backgrounds for your site.

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video
http://www.w3schools.com/html/html5_video.asp
https://www.youtube.com/watch?v=7m9hd5n3EnY
http://joshbroton.com/absolute-positioning-and-horizontal-vertical-centering/
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
http://www.sitepoint.com/designing-with-video-backgrounds/