I just did a fullscreen video thing. Tested both BigVideo and jQuery background video but ended up creating my own stuff.

The video I was working with was also quite long so I figured to loop a short scene at first and then replace it with the full video once loaded. After fixing a few browser quirks, it's pretty solid.

Something like this: http://cl.ly/code/1b2x3n2I2V19

Ended up creating a small jQuery plugin (demo) for sizing the video correctly.

Try to keep the poster image really small. I had Miro generate the poster which I then compressed and optimized.

I didn't look into fallback all that much but added the poster as a background image (with background-size: cover) for browsers without native video support. I added pointer-events: none to the video, pretty sure it removes the play button on iOS.

Update: Consider using object-fit instead of the jQuery plugin I wrote.

I found this the other day, works really well; http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

I never knew about the poster="static.jpg" tag, it helps a lot if the video is huge.

One good way I found to reduce filesize was to use handbrake and then remove the audio channels and export. Bg videos generally don't need or have audio, but they seem to still have a "blank" channel – maybe someone else would know more, but this dropped the size down a ton for me.

One thing you have to realize about FB's paper and then BigVideo is they aren't responsive. Video gets cut off pretty bad for smaller screens, this can suck especially when most of the time the video focal point is the middle of the video. I write a little js to center the video if if the video elements width / height is bigger then it's wrapping container to make sure it's always centered, but still bleeds to make sure it's responsive all the way down to mobile, but by then you should be hiding it anyways.

I've looked all around the web at the size of videos that people are using for bg videos and I've seen that the size is about ~7mb, devices won't automatically play videos due to security issues + having an iphone default circle play button in the background looks wierd lol

check out this jsFiddle of a little sample I just put together for ya. http://jsfiddle.net/xb2kL/18/embedded/result/

Hopefully that helps, to get something like FB is doing with the slider and playing on a specific slide, going to need a bit more js, basically just checking current video positions seek position against all of the video elements lengths added up to determine the position of the progress bar at the bottom, then tracking video progress of a slide to update the progress bar.

If your background video is mostly static (for example graphic animation) you can use the Sublime Text technique

http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html

Crazy good performance, and Apple has even used it.

When it comes to actual video, keeping movement as low as possible helps keep file size down. Notice that on the paper website, if something doesn't really have to move, it doesn't (EG the gestures page, the bottom of the hand and the background 100% static, only the thumb and screen move).

A few things to note:

There are some good tools out there to help out, but here's a good start: BigVideo.

Don't forget your poster image.

On an iPhone, video doesn't auto-start. To handle that problem, you can do a number of things... we used an animated gif. You should probably use a poster.jpg

Biggest thing to consider is cross-browser support that is easy to accomplish if you know the rules, and bandwidth/battery issues. You can compress your video A LOT before the experiences suffers. Like, old-school sub-SD quality compression.

I use this one whenever I use it: http://georgepaterson.github.io/jquery-videobackground/

In addition to that, I use modernizr to test if it's an iPhone and will display a static image instead because of bandwidth issues.

Just recently used it on this project: http://www.thebarnettjax.com

I tend to like it for big announcements or coming soon type of scenarios. Otherwise it'll start to lose it's appeal very fast.

Don't do it?

It's not something I've tested specifically - but the few times I've seen full screen background video come up in usability tests the almost universal reaction from normal folk has been annoyance.

Just wondering if this is one of those design trends that folk jump on because it's cool - rather than useful.

At the very least - consider testing it against some non-video options to see what the reactions are like ;-)

webdesignerdepot.com got a nice tutorial on the topic in 2 parts , i hope it helps :)

part 1 : http://www.webdesignerdepot.com/2013/11/how-to-use-video-backgrounds-for-incredible-visual-impact-part-1/

part 2: http://www.webdesignerdepot.com/2013/11/how-to-use-video-backgrounds-for-incredible-visual-impact-part-2/