Easy fullscreen background cover video

You want a video running as the background of your site. You also want it to be supported on as many of your users as possible. You need it to loop. And at last: you want it to load fast. How do you achieve this?

History

Displaying a video as the site background on a webpage used to be hard. You would have to encode to different formats for different browsers, create some elaborate javascript to load it when the page loads and at last create a good fallback for poor network conditions or unsupported browsers.

This was the reality for web developers up until now. Every step of this process feels like a hack, and it is creating a monster for you to maintain in the future. The web has thankfully moved on, and today the solution is much, much simpler.


no-alt

The solution

HTML. Pure HTML is all you need:

<video
 playsinline
 autoplay
 muted
 loop
>
 <source src="video.mp4" />
 <img src="fallback-image.jpg" alt="" />
</video>

We are describing a video that auto-plays, is muted and loops forever. The plays-inline attribute tells the browser to not open the video in fullscreen mode.

As the video source we use mp4, a format which is widely supported. However, if the browser does not support this format, a fallback image will be displayed instead.

Side note: in order for this to work an all platforms, the video needs to be muted, and contain no audio-track.

Conclusion

Displaying a video-as-background is incredible simple in today's web landscape. We have recently launched a website demonstrating just that: check it out