Video

Marketing specificUpdated May 12, 2026

Description

The video component enables users to watch video content embedded within a page.
Videos can make your content more engaging, memorable, and easy to follow. Use them for:
Help content. Show step-by-step tutorials or product walkthroughs to make learning faster and easier.
Marketing. Highlight new features, product demos, or campaigns to engage and excite your audience.
Internal guides. Share updates, tips, or onboarding content with your team effectively.
It's important that this component be accompanied by some contextual information so the user understands what type of content they are engaging with.

Figma library

Anatomy

Video

State

Warning

States are visual indicators used to communicate a component’s interaction status. Learn more about commonly used component states in our General specs.

Component-specific states

Inactive state with play button (video is not playing)

Active state with pause button (video is playing)

Variations

Play button position

Maintain consistent iconography and sizing across placements.
Ensure adequate contrast and visibility against the media background.
Avoid placing multiple play buttons too close together to prevent confusion.

Center

Bottom right

Color mode

Light

Dark

Examples

The following examples show how the video component should typically be incorporated into a Tile.

1024

800

600

480

288

Best practices

Do not autoplay the video unless the length of the video or animation is 5 seconds or less.
The video must be muted if it autoplays.
Provide context around video content and give users control over playing the video, allowing them to decide what to watch and when.

Overview and triggers

There are a variety of motions that can be applied when a user interacts with a video.

These effect the video’s play button and can be triggered by hovering over an area of a video or by tapping on the video.

Motion is applied to the following elements:

Motion Applied to	Resulting Change	Description
Play button	Scale	The play button scales up in size when hovered over
Play button	Opacity	The play button fades out when tapped
Play button Arrow	Position	Pull back right to left, and then left to right motion on release

Gestural considerations for mobile / tablet

There is no gestural interaction with the video other than the tap.

Technical details of Motion

Motion Applied to	Property	Details	Duration	Easing
Play button	Scale	On hover/click, scale to 125% size	200ms (Very fast)	Standard In/Out
Play button	Opacity	On click, fade out	400ms (Fast)	Standard In/Out
Play button Arrow	Pos-X	R to L, and L to R	800ms	Reveal In/Out

Requirements

Users should be able to:

Identify the video as multimedia content.
Control playback using assistive technology.
Access captions, transcripts, and audio descriptions, if available.
Understand the video’s purpose and context from its title or surrounding content.

Interactions

Not all users can consume visual or audio based media. Videos should also include:

Captions
Transcripts

These can help users to access and understand the content of the video.

Keyboard interactions

Tab. Moves keyboard focus from the previous interactive element on the page to the first interactive control within the video player.
Pressing ‘tab’ moves focus through the elements within the video player.
Enter or Space. Activates the selected element within the video player.

Development considerations

Playback controls should be marked up as button elements.
Playback controls should have clear, descriptive names, provided by an aria-label.
Videos should not autoplay, as this behavior can be disorienting for screen reader users.

Date	Changes
October 2025	Removed marketing variant.Added description to explain use cases: Pendo, marketing, and help content.
August 2025	Updated guidance on the accessibility tab.
September 2024	New version created. Previous version archived in the frozen Web design system.