Best Practices for Background Videos

September 14, 2018 0 Comments

Best Practices for Background Videos



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 

The nhd value is another size preset which yields a frame size of 640x360, exactly one quarter of a standard HD (720) frame.

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

When encountering large scale animation and movement on the web, people with visually-triggered vestibular disorders commonly deal with feelings of motion sickness, like dizziness, nausea and headaches. Fortunately, iOS provides an accessibility setting for “Reduced Motion” and this can be accessed via the media query prefers-reduced-motion in CSS and JavaScript. So in the case of our background video, we can use window.matchMedia to automatically pause an autoplaying video.

Tag cloud