Video Links and Video Player

Videos and video tutorials play an integral role in how customers learn about our products. They provide an engaging way to discover features and learn how to accomplish unfamiliar workflows.

Video Links launch the Video Player. The Video Player is a web-only component that allows users to watch videos in a resizable player that does not block the screen behind it. It opens on click of any video link in product or on a marketing page. The Video Player is also available on the Harmony UI Component Gallery.

Web

When to Use

Video Links come in four styles, each with a specific purpose, and they share most attributes except for visual style.

  • Text link: Text links are used for in-product videos or lists of videos.
  • Mini thumbnail card (horizontal and vertical layout)Mini thumbnail cards are used for stages, lists of videos, help results, carousels, and video hubs. Mini thumbnail cards are not recommended for in-product trowsers, forms, drawers, or task contexts.
  • Solo giant thumbnail: The solo giant thumbnail is recommended for marketing and tutorial pages. The solo giant thumbnail is not recommended for in-product tasks or for displaying multiple videos at once.
  • Large thumbnail group view: The large thumbnail group view is recommended 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. The large thumbnail group view is not recommended for in-product contexts or featured videos.

The Video Player launches when a customer clicks on one of the Video Links listed above. The Video Links and Video 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

All Video Links have a title, play icon and timestamp with units, and launch the Video Player when clicked. Visually all four types are unique.

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

For stand-alone small text links, always include:

  • Video title
  • Length of video with timestamp
  • Harmony font play icon (small style)

Small Text Link – stand alone


For inline text links or text links paired with a description, always include:

  • Length of video with timestamp
  • Harmony font play icon (small style)

Small text link – inline

Mini thumbnail card: horizontal and vertical layouts: The mini-thumbnail is a full-color thumbnail treatment for smaller spaces where the thumbnail card would be below a certain minimum size: 300 x 75 px for horizontal, or 280 x 160 px 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)

Mini Thumbnail Cards

 

Solo giant thumbnail: The solo giant thumbnail is an engaging, primary treatment for featured videos. A solo giant thumbnail should not be used for groups or lists of videos.

Always include:

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

Optional:

  • Video description or metadata located below video thumbnail and title

Solo giant thumbnail examples

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 px)
  • White Harmony play icon (large style)

Large thumbnail grid view

Video Player

The Video Player launches when a customer clicks on a Video Link. It opens centered over the page and the video starts to play automatically. The player can be moved around the screen, and persists on top of the page until it is closed, even if the user navigates to a different tab in product. It does not open in a separate browser window. The player can also be minimized to a half-size view. If the player is moved and then closed, it re-opens in the same place at the same size – it remembers its most recent size and location.

The Video Player does not open when videos are viewed on mobile web. 

The Video Player has several optional features 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
Full size video player

Full size default video player

 

Half-size video player

Half-size video player after default player is minimized


Optional feature: Recently Watched panel
The Video Player has an optional feature which allows a user to view the history of their most recently watched videos. If the Recently Watched panel is activated, the Video Player will remember the videos a customer has watched from a logged-in state, up to eight videos. On click of a video in the recently watched panel, the panel automatically closes and the video will start to play. The Recently Watched panel is not available if the video player has been minimized 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 Recently Watched videos panel

Optional Recently Watched videos panel

 

Recently watched Panel in Edit mode

Recently watched Panel in Edit mode


Optional feature: End-of-video Overlay 

The video player also has an option to add a text overlay and a primary button that will display at the end of a video. The Overlay can be used to suggest another task, add a button to link to a page in product, or direct users to where they need to go next. It is not available on the minimized view of the player.

The End-of-video Overlay includes:

  • Dark overlay and optional text area
  • Primary button
End-of-video Overlay example

End-of-video Overlay example

 

 

Where this pattern is used

Videos should be used wherever light guidance could help a user complete a task, especially in learning and first time use contexts, but in a way that won’t compete with primary page content. Use good judgement on when and where to include Video Links in product.

 

© Intuit 2016 | Terms of use