Since videos are typically large files, they will consume more bandwidth and will slow down overall page load time. Consider using media queries to serve a video with smaller dimensions and a lower bitrate to small-screen devices. This will allow for more efficient streaming and playback on small-screen devices, and will consumer less overall bandwidth for those on a cellular connection.
Run the above ffmpeg command, but adjust the
-s (size) option and lower the
-b:v (target bit rate) option:
ffmpeg -i input.mp4 -c:v libvpx-vp9 -an -b:v 500k -s nhd output-500k.webm ffmpeg -i input.mp4 -c:v libx264 -an -b:v 500k -s nhd output-500k-500k.mp4
Another option would be to use media queries to serve a static image to small-screen devices. An image will consume much less cellular data than a background video.
Ensure sufficient contrast with foreground text
If you’re displaying text over your video, make sure it's easily readable. If it’s not, you’ll need to increase the contrast by adding an overlay to the video, changing the text color, or adding a text-shadow or a background to the text.
Provide a pause button
There will always be people who might like to pause the video so it’s best to give them the ability to do just that.
Also, while WCAG doesn’t specifically call out the use of background video, the success criteria in section 2.2.2 (Pause, Stop, Hide) may apply to this:
“For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it...”
A background video isn’t technically information, but it does meet the other criteria above. I’ll let you be the judge.
Anticipate the possibility of motion sickness
window.matchMedia to automatically pause an autoplaying video.