A reader writes in:
I’ve seen done beautifully, but I’m having a hard time finding any articles on best practices. I try to steer clients away from wanting video background even though it’s hard to argue against it because it does look stunning when done right.
“Look at my competitor’s website, they have a video!! You can do it!!”, they say.
The problem I run into is when a client actually sends me a video they want to use, it’s either crappy/low quality or the file size is way too big and would never load in time before the user leaves the site and never looks back.
It’s time for a THOUGHT DUMP!
Is it “just a trend”?
I don’t think “video” is a trend, but “cover the entire screen with video and set white text on top of it as the homepage” probably is a trend. Not that there is anything wrong with that. Another way to think of a trend is in fashion and people don’t tend to be as negative about being in fashion.
This particular trend is at least few years old now though. Posts like 60 Beautiful Examples of Websites With Full-Blown Video Backgrounds are over 3 years old (as far as I can tell).
People do tend to roll their eyes at old fashion.
Sometimes trends are benign to results
There is research that the seemingly superfluous trend of parallax scrolling doesn’t negatively impact “usability, enjoyment, satisfaction, and visual appeal” but increases fun.
A surprise to me, at least.
Does it fit with the brand? And your plan and vision for the site?
Remember, they hired you.
There is that classic analogy where you wouldn’t tell a plumber how to install a faucet. You hired them to do it because they are the expert. In this case, this company hired you to design a website because you are the expert. That holds true up until you think “well, you do tell the plumber which faucet you want installed.”
Still, if they hand you a video that doesn’t seem to work with the rest of the site, that’s not good.
Video is just a medium, it’s not exempt from needing to adhere to the brand. Does it fit the color palette? Does it have the same voice and tone? Does it feel like it belongs?
Video is only going to get more and more normal
How it is used will evolve as well. The people in Harry Potter weren’t surprised that the pictures in the newspapers moved, it was their normal.
The quality better be pretty darn high
Not because of the size, but because of the expectations. If you’re going to force me to see this video, it better be kinda awesome. It better help me understand your thing in a quicker and more meaningful way.
Is autoplay the only way?
People have aversion to autoplay. I don’t have a study to point you to, other than I’ve seen countless people squirm and grumble when they see it.
No sound
Autoplay isn’t nearly as bad when there is no sound, and to be fair, the trend is for these videos not to have sound. Although, for me at least, when I see a video start to play automatically, it triggers uh oh shut it down muscle memory.
Performance
This is the elephant in the room.
Even small videos are huge resources. Especially when you’re talking going full screen by default. Especially when the quality needs to be high or it will make the site embarrassingly trashy.
Do you have a plan to not completely destroy performance? There are lots of studies showing that bad performance is bad bad bad.
Perhaps you can only load the video after the rest of the page is loaded? Mustard cut it? Show a nice poster
image? Perhaps there is a way to do like…
<video
src="#defer-loading"
poster="nice-default.jpg
autoplay
/>
Are there more tricks you can look into? Inlining it? Extreme compression? Streaming? Limiting colors / black and white? Overlaying static stuff (e.g. dots/lines) to hide lower quality in an interesting way? Blur?
Budgeting
Do you have a performance budget, such that the video can trigger sacrifices elsewhere, evening page weight out a bit? Seems like a fair approach. And a common one, as the trend seems to point to very simple pages with simple calls to action to take you elsewhere.
Do you need a service?
In my experience, using a video hosting service like YouTube or Vimeo solves a boatload of pain points, like bandwidth fees and cross-browser interoperability.
Can you design the player such that it works for the design? Or do you need more full control?
Are you going to measure success?
If a video background is a sea change in the site’s design, wouldn’t it be a good idea to set up some metrics to ensure the change is a positive one? And have a plan if it isn’t?
Need the code to make it full screen?
Color me a little skeptical of things like jQuery plugins.
CSS is what you need to position the video in the background and size it.
Dudley Storey has approached it this way:
video.fullscreen {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
And his demo even has some bonus features like pausing:
See the Pen Fullscreen HTML5 Page Background Video by Dudley Storey (@dudleystorey) on CodePen.
His blog post on the subject covers a few other important things too, like how to hide the video on small screens (if you want to) and dealing with IE 8.
Used this for an new website I’m currently building. Only having one issue with it. As in the example, after the video is done, the video turns black for 2sec. nyway to fix this?
What I would see is the video replays in a fluid way.
Try a different video mate, Try uploading your video to youtube then use it. Also I have found vids that are a minute or longer, are really heavy and can take a second or more to reload. Maybe this is your issue? See if this video gives you the same issue. https://www.youtube.com/watch?v=a87GC4ahmjA
And why not
object-fit: cover;
?See the Pen FLEXIBLE COVER VIDEO by Kseso (@Kseso) on CodePen.
My assumption is that it isn’t implemented in IE. That would be ideal though.
Yes, you really need video[poster]{ height:100%;width:100%; object-fit: cover;} for the video poster so that it stretches out nice all over the viewport.
But I do not have this problem with the 2s black screen , I made two, one with autoplay and pause button, and one with controls…
In our experience, we have to remember that mobile doesn’t autoplay, so when working on responsive site, so a good image fallback is necessary.
I feel your thoughts on parallax and mine are, if you’ll forgive the pun, in parallel. But there’s quite a bit of private A/B testing I’ve seen that says however clunky and resource heavy we feel it is (and it is, it requires bigger images and extra code than not having it) as developers/coders, users like it when it’s done properly and are generally willing to have the (actually quite small albeit real) performance hit for the “cool” or the “fun factor.”
I think I might be lucky that I don’t hit many sites with video backgrounds, at least not yet but your brain dump seems to hit a lot of the points for me.
It needs a decent loading image (that should be easy enough) that you replace with a good quality video – and you need to cope with something that works on a small smartphone and my 28″ screen or bigger! I can’t see how background video works without autoplay but if you autoplay with sound I will mute your site and blacklist it as a customer/visitor. I doubt I’m alone in this. (I had a client that autoplayed a video other than as a background on certain pages, I had my computer muted for all the times I worked on their site it annoyed me so much. Oddly they went out of business. I can’t prove it was that page that did it but I have my suspicions.)
I know we all work to the “you have 10s to grab your visitor’s attention” paradigm. A video will probably struggle to load in that time, even if you hand it off to YouTube, Vimeo etc. unless it’s really short. I think you missed out discussing that your client as a key point too. If they turn up with a 30 minute video they want to play in the background it’s almost certainly not the right video to play that way – if I’ve looked it up on YouTube then I’ll wait for it to load and play, that’s different. If it’s loaded and grabs my attention before I click away, I can see it might extend the 10s before I click, which isn’t a bad thing.
In the spirit of the “blur up” background image technique, I’ve been messing around with the concept of making super tiny, low frame rate animated gifs, stretching them out, and blurring them. I made a 15 second, 10fps, 40×20 gif that was under 200kb — it makes a really cool background effect. And you could still load a high-res video after the page is done loading, but the motion alone on the blown-up tiny image got the effect we wanted, without having to download a huge video.
Hey Paul — any chance we can see a quick demo of this? Perhaps a codepen?
@Mike M – I will try to get you a codepen this weekend, Monday at the latest. I’ve got a lot of other things in the way, but I’ve been wanting to write up a demo for my blog anyway.
Here’s a pen!
Some notes:
– Because IE10-11 don’t support any version of CSS filters, an alternate, “pixelated” effect is used
– If javascript is turned off, the full video will get downloaded but never displayed. A better way to handle this would be to insert the
<video>
element into the DOM using Javascript– Full size video doesn’t synchronize with the animated GIF. I have a solution for this I’ll address on my blog
– Should work on IE10+, and all modern browsers, but was only tested on Chrome for Mac, IE11 & Edge 13 for Windows 10
A step by step of how this works, plus bug fixes and other performance improvements will be discussed on my blog sometime this week. If you’re interested plaidpowered.com
I think an above-the-fold, full-screen video background should only be used if it serves a purpose, otherwise it’s totally distracting. For example, we’re redoing a website for a client that manages a large event venue in London, and I’ve pushed for a video background because it shows off the venue, not because it looks good. Function before fashion!
Hi Chris,
Any solutions for Android and windows safari user??
This is a not so far distant cousin to large bg imgs or hero imgs. There will be a sense of responsibility involved when using bg video. As w/ much of the imgs on sites, there is a need to optimize. Being familiar w/ video, i see the same issues. Many are not optimized to the most manageable size possible. And, just like retina imgs have grown to complicate how we serve imgs, video/4K video is on the distant, but visible horizon.
Cisco has claimed that by 2019, 80% of internet traffic would be video content.
We also know that wait times blow #ux apart. Art direction will be crucial.
I agree that video backgrounds do fare well w/ users/clients. But in a growing era of perf/budgets, and responsibility as devs, there’s something Bruce Lawson has driven home: the majority of the planet is NOT on high end phones nor on amazing networks.
Luckily, many tools are coming along – resource hints come to mind.
great css!
thanks for share. i’m want to make this css in my site http://www.booswp.com/
thanks admin :)
Picture paints a thousand words, but a video paints a thousand picture. lame
If you have a compelling video, most of the time its to set the mood of the company, then by all means show it.
Just keep in mind, that the video needs to be short, at best below 15 seconds and looped without audio.
Also you need .mp4, .ogv and .webm formats so they work across browsers. The poster is a good fallback for mobile users.
But if your video is a walkthrough of the website, a background video will not work as it will be blocked by all the other elements in front of it.
As the author of the jQuery plugin linked in the article, I just wanted to chime in to say this is a great article. A lot has changed since August of 2012 when I created BigVideo.js.
Originally my use case was a website where the content was mainly composed of videos (e.g. an agency reel). I needed to be able to support ambient background video as well as video content with sound and custom branded player controls.
BigVideo.js is overkill for when all you want is an ambient background video at the top of a page. Video on the web has much better support on browsers than back in those days, and as Chris says, can be accomplished with less javascript. I have updated the project page to reflect this and to give notice that the project is no longer under active development.
Hi there tell me what do you think about my site, with html video background :-) http://www.andreapilutti.com
Lovely site, there is a little bit of jank in terms of moving from the menu to a portion of your page (I am on a Macbook air, not sure how mobile would respond), not sure if this is a javascript optimization, placing elements onto the gpu (didn’t check the code) or simply too many keyframes(?) or transitions running at the same time? Gorgeous though, love the video at the top, fits great with your pic :)
Thank you Brendon! Yes I’am aware that the scroll could get a little jumpy. I assume it is related with Skrollr.js plugin that calculates the position of animated elements according to the scroll position. For mobile I’ve disabled those scrolling effects and replaced the video with a placeholder image.
You’re missing the ending quote for the
poster
attribute under performance. Nothing major, but just wanted to point it out :)Other then that, great article.
As a user I hate video backgrounds. Always. They are annoying, they dictate me to look at them, they autoplay, they waste my mobile traffic.
As a developer I would ask my client why do they want it? Just to look as fancy as their competitors? Will it help to increase ROI, CPM and all other kinds of metrics and eventually revenues?
As a user, absolute hate it. It wastes resources, drains batteries and spins up my fans.
But there’s also an accessibility problem here. Moving images on a page can make text incredibly difficult to read for people with vision problems or who are sensitive to flashing and movement. The example shows the text on a background that will be light or dark and changes over time. (Having a pause button out of sight may not be of much help – but even if it was on top, if people can’t [i]find[/i] the button because they have difficulty understanding the page it’s not very useful.)
I think the habit of having latin placeholder text, rather than real text with information you want to extract, distracts from this problem.
There is also a second thing to note here: accessibility to the extremes has become some consideration for designers. Many sites are required to be accessible to screen readers. Smart image replacement techniques have been invented.
But now we are making it difficult for users that could do just fine if the page wouldn’t do anything extravagant. Not only are we making the pages more difficult for them, but also, since their needs are more context dependant, people have no real way of disabling just the things that cause problems. For example: they may very well be capable of watching video’s, just not to read text when the background is moving, (either directly behind the text or next to it, both may be an issue.)
If they would limit video playback entirely (which isn’t even that easy to do) it still would hardly be considered a good option, since it also limits all the cases that videos are useful.
If you are creating work of art – it is absolutely fine. But if you also have information you want to convey, please be considerate.
Chris, I love ya and this is a pretty good article, but what Inca is saying is a big piece missing from it.
As someone who suffers from a vestibular disorder and an accessibility advocate particularly for motion on the web, background video isn’t a good idea…yet.
And the yet is key. As Inca points out it’s hard to read. Screen readers can struggle to access the content on top of the video depending on how it’s implemented. Most of the time the controls for playback are missing, and if there is a play/pause it is wicked hard to find and is in a weird tab order.
What we need is for browser makers to implement application level settings where a user, like myself, can indicate that video NEVER autoplays and animation is off until I say otherwise. This will eliminate the issue of the background making people ill, but it doesn’t resolve the readability of the text over the images and video.
I totally agree: seems to me that accessibility should be a major consideration for video backgrounds. There’s a good article on A List Apart about designing for people with vestibular disorders, but even I, a non-sufferer, have seen sites with rotating motion that made me feel (mildly) physically ill (this one, for example – open with caution, obviously). This experience made me considerably more wary of careless use of video backgrounds.
If you do use videos like this, it’s probably a good idea to disable AirPlay (Apple docs say
x-webkit-airplay="deny"
on the video element). I was listening to a podcast on my phone, streamed via AirPlay to my Apple TV and opened this article. Podcast aborted and video popped up on the TV. I hadn’t even scrolled down to the part of the article that had the video.. :)Hi!
The CSS used for the video player has the following rules;
Would that be any different to doing the following?
If you’re using that code to center the video, the alternative you suggest would only work if you have a fixed width and height and
margin:auto
set on the video. Otherwise, setting all the positions to 0 would stretch the video to fit the container and in most cases distort the aspect ratio. Chris’ method allows him to stretch and crop to fill the container without distorting it.Just wondering why z-index has to be -100? I’m new to CSS & HTML so forgive me if it’s obvious. Most of my webpages with video work OK with z-index at 0 and everything else on a layer at +1.
Hi. z-index of -100 is just to make it sure that the video goes behind every other element on the page. Hence if in future more elements are added on the page so we won’t have to worry about changing the z-index again.
Hello!
Why do we use (top: 50%; left: 50%;) and ( transform: translate(-50%, -50%);)?
Is not that the same thing does?
Thanks!
A reader wrote in: