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?
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.
HTML. Pure HTML is all you need:
<source src="video.mp4" />
<img src="fallback-image.jpg" alt="" />
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.
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!