A reader writes in:<\/p>\n
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.<\/p>\n
“Look at my competitor’s website, they have a video!! You can do it!!”, they say. <\/p>\n
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.<\/p><\/blockquote>\n
It’s time for a THOUGHT DUMP!<\/p>\n
<\/p>\n
Is it “just a trend”?<\/h3>\n
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<\/em> and people don’t tend to be as negative about being in fashion. <\/p>\n
This particular trend is at least few years old now though. Posts like 60 Beautiful Examples of Websites With Full-Blown Video Backgrounds<\/a> are over 3 years old (as far as I can tell).<\/p>\n
People do tend to roll their eyes at old fashion.<\/p>\n
Sometimes trends are benign to results<\/h3>\n
There is research<\/a> that the seemingly superfluous trend of parallax scrolling doesn’t negatively impact “usability, enjoyment, satisfaction, and visual appeal” but increases fun.<\/p>\n
A surprise to me, at least.<\/p>\n
Does it fit with the brand? And your plan and vision for the site?<\/h3>\n
Remember, they hired you. <\/p>\n
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<\/em> you want installed.”<\/p>\n
Still, if they hand you a video that doesn’t seem to work<\/em> with the rest of the site, that’s not good.<\/p>\n
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<\/em> like it belongs? <\/p>\n
Video is only going to get more and more normal<\/h3>\n
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.<\/p>\n
The quality better be pretty darn high<\/h3>\n
Not because of the size, but because of the expectations<\/em>. 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. <\/p>\n
Is autoplay the only way?<\/h3>\n
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.<\/p>\n
No sound<\/h3>\n
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<\/em> muscle memory.<\/p>\n
Performance<\/h3>\n
This is the elephant in the room. <\/p>\n
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.<\/p>\n
Do you have a plan to not completely destroy performance? There are lots of studies showing that bad performance is bad bad bad<\/a>.<\/p>\n
Perhaps you can only load the video after the rest of the page is loaded? Mustard cut<\/a> it? Show a nice
poster<\/code> image? Perhaps there is a way to do like…<\/p>\n<video\r\n src=\"#defer-loading\"\r\n poster=\"nice-default.jpg\r\n autoplay\r\n\/><\/code><\/pre>\nAre 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?<\/p>\n
Budgeting<\/h3>\n
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.<\/p>\n
Do you need a service?<\/h3>\n
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. <\/p>\n
Can you design the player such that it works for the design? Or do you need more full control?<\/p>\n
Are you going to measure success?<\/h3>\n
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?<\/p>\n
Need the code to make it full screen?<\/h3>\n
Color me a little skeptical of things like jQuery plugins<\/a>. <\/p>\n
CSS is what you need to position the video in the background and size it. <\/p>\n
Dudley Storey has approached it this way:<\/p>\n
video.fullscreen { \r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n min-width: 100%;\r\n min-height: 100%;\r\n width: auto;\r\n height: auto;\r\n z-index: -100;\r\n transform: translate(-50%, -50%);\r\n}<\/code><\/pre>\nAnd his demo even has some bonus features like pausing:<\/p>\n
See the Pen Fullscreen HTML5 Page Background Video<\/a> by Dudley Storey (@dudleystorey<\/a>) on CodePen<\/a>.<\/p>\n