Guidelines for Banner Videos

In this section you will learn how to work with banner ambient videos to ensure that your video looks amazing and loads quickly on any device.

Finding footage for ambient videos can be challenging because each device will produce a unique view depending on the device's size. Below you can find examples of standard desktop, tablet and mobile sizes, and how the ambient video will fill that space. 

An illustration of multiple device sizes for web design, including desktop, tablet and mobile.

Ambient Video Specs

  • File type: MP4
  • Ambient video size: Max of 2MB 
  • Recommended Dimensions: 1920 x 810px
  • Requires and image thumbnail of the same size: same as video dimensions
  • Audio: No audio. *Note: Save space on your MP4 file by turning audio off.
  • Composition: The composition should have a focal point that towards the top, and center/right. *Note: There is no hard and fast rule of what will and will not work in every scenario. 
  • Contrast: Your footage should not have too much contrast in order to read the header text and subtext. We have the option for white or dark grey text. (See below for more design details.)
  • Length: 8-12 seconds recommended
Background image

Video size: 1920 x 1080

Desktop View

  • A screenshot of a web page ambient video example

    Desktop View

  • A video clip from the Figure 4 Hi Temp AMB material

    Actual Video Size (1920 x 1080px)

    *Note: The recommended video size is 1920 x 810px.

  • A video clip from the Figure 4 Hi Temp AMB material

    Cropped area

    *Note: The recommended video size is 1920 x 810px, which would reduce the amount of cropped area seen above.

Tablet View

  • A video clip from the Figure 4 Hi Temp AMB material

    Tablet View

  • A video clip from the Figure 4 Hi Temp AMB material

    Actual Video Size (1920 x 1080px)

  • A video clip from the Figure 4 Hi Temp AMB material

    Cropped area

Mobile View

  • Image from the Figure 4 Hi Temp AMB material

    Mobile View

    Mobile devices use images, not videos. See the section below for specs on mobile images. 

  • Image from the Figure 4 Hi Temp AMB material

    Actual Image Size (940 x 369px)

  • Cropped area

Mobile Image Specs for Ambient Videos

    • Choose the first frame of your video: The image will show for a moment before the video loads.
      *Note: Although the crop will be slightly different, this allows for a more seamless experience. 
    • File type: .jpg or .png 
    • Image Size: 940 x 369px, Maximum of 1MB (compress .jpg or .png images here)
  • Video from the Figure 4 Hi Temp AMB material

    Use the First Frame of Your Video

  • Image from the Figure 4 Hi Temp AMB material

    Crop Image: 940 x 369px

Design Requirements for Ambient Videos

  • A hero image with too much contrast so you can't read the text in the image

    Contrast

    This example shows design elements with too much contrast so that the text in the title is not readable.

  • A hero image with text embedded so you can't read the title text on top of the image

    Embedded Text

    Ambient videos should not have embedded text anywhere to ensure that the hero title is readable.

  • graphic silhouettes of a group of people

    People

    When people are present in the footage, consider the following: 

    • crops that make the human form unflattering or odd
    • close-ups shots can expose and highlight flaws (like dirty fingernails for example) - use close-ups deliberately or not at all
    • hair and make-up