Fullscreen background HTML5 Video best practices?

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

  • 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