26

Fullscreen background HTML5 Video best practices?

over 7 years ago from , Product Design Director & UX Lead

Hello folks,

I'm designing a new set of landing pages with fullscreen background video and was wondering what are the best practices regarding performance , responsive tricks and browser support.

I've already exported the video on mp4, web and ogg using Miro Video Converter and the size of it is 4mb, kinda big right?

Any good trick, tutorials or examples like www.facebook.com/paper?

Thanks!

14 comments

  • Account deleted over 7 years ago (edited over 6 years ago )

    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.

    10 points
  • Viktor TViktor T, over 7 years ago (edited over 7 years ago )

    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.

    6 points
  • Graham MGraham M, over 7 years ago

    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.

    5 points
    • Jake ChapmanJake Chapman, over 7 years ago

      Another really good one is Miro I've been using this and haven't had a problem at all yet. Would be cool to combine both of these tools though, Miro compresses better but Handbrake would an awesome 2nd step to remove audio channels completely.

      2 points
  • Jake ChapmanJake Chapman, over 7 years ago

    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.

    5 points
    • Thomas MechauThomas Mechau, almost 7 years ago (edited almost 7 years ago )

      Hi, I'm just trying to do my first steps in Web Development. I need a short full-screen background video on my Home page - not as a nice-to-have eye catcher, but to complement my other content. It needs to be full-screen and centered under all circumstances, and it needs to work with every browser and on every hardware. Of all the solutions I have seen, your approach seems to be the best performer (although I still have to work out how to fit it into an existing Bootstrap site as background video) on all my tested (Windows) desktop browsers. However, strangely the video does not appear at all on most mobile browsers under Android (except Firefox). Unfortunately the browser does not seem to notice that there is a problem because it does not even show the fallback still image ("poster"), but just a black box. Any idea why this could be the case? Thanks, Thomas

      Update: I found that the "black box" is actually the video player displaying nothing, because autoplay is not supported and there are no controls. So the approach I'll be following now is to determine whether Autoplay is supported, and if it is not, to remove the video element, so that the fallback image is visible instead.

      0 points
  • Eliot SlevinEliot Slevin, over 7 years ago

    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).

    3 points
  • Jonathan CutrellJonathan Cutrell, over 7 years ago

    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.

    3 points
  • Dennis EusebioDennis Eusebio, over 7 years ago

    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.

    1 point
  • Adrian HowardAdrian Howard, over 7 years ago

    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 ;-)

    1 point
  • Mohammed ElagouzMohammed Elagouz, over 7 years ago

    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/

    1 point