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