Hero Video Standards

---

Videos can be difficult to work with and creating good background videos for the hero section is tricky. To be approved for using videos in your hero area you must agree to adhere to the following standards. If you need help finding video content, contact Creative Web Services.

 

• HD Quality.
  Use videos that are 720p. You may use a higher quality clip if it is very short (<3s). Remember to keep the file size as small as possible.
  
  
• Try not to be distracting.
  Videos with fast moving content or jarring edits can be distracting from the page and in some cases even make users feel nauseous. Keep content and movement in mind when selecting a video. Clips with subtle movements, slow motion, or timelapses are a great way to enhance a page.
  
  
• Keep it short.
  Edit videos down to <10 seconds.
  
  
• Darker Videos work better.
  By default hero videos are darkened 35%. When using a brighter video you may want to edit it to appear darker so that text displayed over it is more legible.
  
  
• Remove Audio.
  Remove any audio from your videos to reduce file size.
  
  
• Save as .mp4
  Use the mp4 file type when exporting or saving.
  
  
• Compress.
  Use a compressor to reduce the file size of your video. Try to keep files as small as possible, < 5mb, the smaller the file the faster your page will load. Handbrake is a free video compression application.
  
  
• Loop.
  Hero videos autoplay on a loop. Use a video editor to trim the beginning and end of the video or duplicate and reverse the playback to create a seamless loop.
  
  
• Fallback Image.
  Recommended Size: 1280x720. Videos do not display on touch or mobile devices. Instead a fallback image is provided. Use a screenshot of the video's first frame or similar content to prevent a jump when the video is loading on slower connections.
  
  
• Optimize for Web
  Hero videos should be optimized to load quickly for seamless playback. This will help prevent a delay when users first load a webpage containing the hero image. Video editors such as Handbrake can be utilized to export your .MP4 video using the "Web optimized" setting. For more information on this setting, please refer to this Handbrake article on Web Optimization.