Background Videos

Strategy

Background videos can serve as powerful visual for your website. However, they are also hard to do well. The way the video is edited can provide either a striking visual or it could be a choppy and confusing experience that distracts your users. The safest bet is to display only 1 scene that has minimal change to the frame of the video, like the video above. If there are multiple scenes, the transitions shouldn't be choppy or jump abruptly.

Not every page needs a background video. Background videos are hard to do well, so it's best to do fewer of them well to provide maximum impact. Save them to show off your most impactful aspect of your department or program.

Technical Specifications

  • File size at 5 MB or less
    • If the file is larger than this size, you can negatively impact load times and cause the whole page to load much more slowly. Keep in mind that not everyone has great cell reception or high speed internet.
  • ~10 seconds long
    • the length of the video is greatly limited by the file size, so there isn't a hard and fast rule here.
  • The video frame should be stationary or have limited movement for:
    • Good experience
      • this is a background video and shouldn't be a feature film. It should be subtle and an impressive visual, not a Bourne movie.
    • Accessibility
      • there are people with vestibular disorders or ADHD that find movement a distraction or causes symptoms. People with vestibular disorders may become nauseous or dizzy from a background video with lots of cuts and fast sweeping camerawork. Those with ADHD may find the video distracting and make it more difficult to find the what they need. Let's make our webpages a place for everyone.

Compressing videos for web

Here is a process for Adobe's Premiere. There are many programs out there to edit videos, and you are welcome to use whatever tool you're comfortable with.

  1. Cut the slice of video that you want
    1. Create a sequence, using in and out. Otherwise, there will be a flash of black when the video loops.
      1. press i to set the in
      2. press o to set the out
    2. The c key cuts. you should cut it after the "out" point. 
  2. Export
    1. Click on the file name to rename the file and/or change where it saves.
      1. You'll want to preserve the original video file and rename your shortened clip to
    2. Format: H.264
    3. Match the frame rate
    4. remove the audio track
    5. Bitrate: ~5mbps
    6. Source range: sequence in/out