HP.com Design System HP.com Design System HP.com Design System

Video component

This component is used to display a video, whether it be ambient or full.

Usage

A video component is used to display an ambient or click-to-play video.

Module specifications

Video specs are as follows:

  • Mp4s preferred, gifs ok
  • For ambient videos, length should be 11 seconds or less, non-looping, and file should be under 2mb
  • For full bleed (edge to edge) videos, desktop size should be 1920x600 tablet and mobile size should be 720x500. (Videos being placed inside other modules should follow the sizing specs for those modules)
  • Resolution should be 1080p 
  • Videos can be configured to autoplay and ambient loop, or click-to-play which will open up a modal
  • Video files can be uploaded to the DAM, or a youtube link may be used.
  • Text may be used on top of a video
  • In cases where there is an ambient loop with a featured video, the featured video will open up as a modal through the expand button. 

Character counts (with spaces)

This is one of the few components that does not have a character limit, however we do ask that marketing use best-practices in keeping copy short, concise and consumer-facing to keep reader's attention.

Example layouts

Desktop version with play button

Mobile version with play button

Resources

Reference

For Zeplin access contact the UX Design Manager

Figma

Components can only be copied from our library, unless you belong to our HP Enterprise Figma instance.