Video can be used on product or marketing pages. There are two parts to this component: the video link that leads to and launches the video and the video player itself. Currently, the video player is a web-only component.

Usage

Video messages and tutorials play an integral role in how customers learn about our products. They give users an engaging way to discover features and learn how to accomplish unfamiliar workflows.

Use videos wherever some light guidance can help a user complete a task, especially when learning a new feature or trying out something for the first time. Be sure to present the video in a way that doesn’t compete with primary page content. We never want our video content to get in the way of the user’s getting stuff done. Use good judgment on when and where to include videos.

Video links come in four styles, each with a specific purpose. They share most attributes except for visual style.

  • Text link: Use text links for in-product videos or lists of videos.
  • Mini thumbnail card (horizontal and vertical layout): Use these cards for stages, lists of videos, help results, carousels, and video hubs. Don’t use mini thumbnail cards for in-product trowsers, forms, drawers, or task contexts.
  • Solo giant thumbnail: Use this thumbnail for marketing and tutorial pages. Don’t use the solo giant thumbnail for in-product tasks or for displaying multiple videos at once.
  • Large thumbnail group view: Use this view for groups of large thumbnails on marketing pages or for including additional video metadata, such as descriptions, likes, or number of views. This is a marketing pattern only. Don’t use this view in the product.
Video player launches when a customer clicks on one of the video links. The video links and player are not intended for videos embedded within a page. The video player is not accessible from mobile web or on mobile apps.

Appearance & behavior

Video link

All video links have a title, play icon, and timestamp with units. Users select one of the links to launch the video player. Visually all four types of video links are unique.

Text link: The text link is a light text treatment for small spaces and lists. This link doesn’t visually compete with primary calls to action, tasks, or other in-product content.

Stand-alone small text links
when link stands along, show full title.

Reversed – dark background

Inline text link or links paired with a description

 

Mini thumbnail card: horizontal and vertical layouts: The mini-thumbnail is a full-color thumbnail treatment for smaller spaces where the thumbnail card is below a certain minimum size: 300 x 75 pixels for horizontal, or 280 x 160 pixels for vertical.

Always include:

  • Video title
  • Length of video with timestamp
  • Full color thumbnail with 30% alpha overlay
  • White Harmony play icon (large style; this is different from the small style used for text links)

Solo giant thumbnail: The solo giant thumbnail is an engaging, primary treatment for featured videos. Don’t use a solo giant thumbnail for groups or lists of videos.

Always include:

  • Video title
  • Length of video with timestamp
  • White Harmony play icon (large style)

You can also include:

  • Video description or metadata located below video thumbnail and title

Variant 1 Solo giant thumbnail with no description

Variant 2 Solo giant thumbnail with description

Large thumbnail group view: The large thumbnail group view is for grids of videos that showcase featured videos. This treatment supports titles, full video descriptions, or additional video metadata.

Always include:

  • Video title
  • Length of video with timestamp
  • Video description or video metadata to the right of video thumbnail
  • Full color thumbnail (above minimum size of 405 by 225 pixels)
  • White Harmony play icon (large style)

Video player

When a customer selects a video link, the video player launches. It opens centered over the page and the video starts to play automatically. The user can move the player around the screen, and the player persists on top of the page until the user closes it, even if the user navigates to a different tab in the product.

The video player doesn’t open in a separate browser window. Users can minimize the player to a half-size view. If the player is moved and then closed and then reopened, it reopens in the same place at the same size. The system remembers the player’s most recent size and location.

Note: The video player does not open when a user selects a video link on mobile web.

You can also use several optional features for the video player, including a recently watched history panel and an end-of-video overlay.

The default video player always includes:

  • The video title
  • Standard YouTube video controls: pause, play, adjust volume, and fullscreen
  • A control to minimize the player down to half-size
  • A control to close

Optional feature: recently watched panel
This optional feature allows a user to view the history of their most recently watched videos. If the recently watched panel is active, the video player will remember the videos a customer has watched from a logged-in state, for as many as eight videos.

When a user selects a video in the recently watched panel, the panel automatically closes and the selected video starts to play.

The recently watched panel is not available if the user has minimized the video player down to half-size.

The recently watched panel includes:

  • Control to open and close the panel that shows up to eight recently watched videos, with the most recently watched video at the top
  • An edit mode that allows a user to manually remove one video at a time from their viewing history, or to clear all of the videos from the panel at once

Optional feature: end-of-video overlay
With the video player, you can also add a text overlay and a primary button that displays at the end of a video. You can use the overlay to suggest the next task a user might want to take. Or you can add a button to link to a page in the product. This option is not available on the minimized view of the player.

The end-of-video overlay includes:

  • Dark overlay and optional text area
  • Primary button
  • Was this Helpful?
  •