Fullscreen background HTML5 Video best practices?

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

  • 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