Video player

v2.0

The video player is used for displaying and controlling video content.

CSS
Marko
React

Considerations

Familiar

The video player works as expected across all platforms.

Performant

The video player optimizes playback to run smoothly.

Connection

Video enables people to express themselves and their content on a deeper level.

Anatomy

Play trigger
Scrim
Playhead
Play/pause
Time elapsed
Progress indicator
Duration
Closed captions
Volume
Report
Expand/collapse
Overflow
Volume slider
Close button

Properties

Media ratio

The video player container has a ratio of 16:9. Media uploaded in other ratios is centered within the player. The supported media ratios are 16:9, 5:4, and 1:1.

Orientation

The orientation of the player can be landscape 16:9 or portrait 9:16. Landscape is the default.

Autoplay

A video can be set to autoplay on page load or when scrolled into view. When set to autoplay, the video is muted until the user chooses to unmute. Users can set their browser to block this behavior by default, so don’t rely solely on audio for important information. Leverage closed captions whenever possible.

Behavior

Inline

For inline videos, a play button is always present over the video thumbnail when the video isn’t playing. The thumbnail updates to the last frame viewed when a user pauses the video.

Lightbox

The lightbox presentation is a modal view available on web. The lightbox launches from a trigger element and loads a video in the center of the screen above a scrim layer. Interaction with the content below is blocked until the video is closed.

The lightbox can include carousel functionality to allow users to navigate to other media content without having to close the lightbox and open each element individually.

Tooltips

Hovering or focusing on an icon reveals a tooltip with the button label.

Changing volume

A volume slider appears when hovering or focusing on the volume icon. The icon’s appearance adjusts according to the volume level and has a slash when muted. Clicking or tapping the icon toggles between mute and the previous volume level.

Platforms

Native

Native apps use the native video capabilities. iOS devices launch videos in full screen automatically when the video is played. Android devices play videos inline with an option to go full screen.

Web

Web videos can play inline or in a lightbox with an option to go full screen.

Best practices

Autoplay

Videos must be muted with controls available if the autoplay property is used. Use surrounding content to reinforce the value of the video content.

Never autoplay a video with audio, and don’t rely on autoplay to work. Most modern browsers automatically block autoplay if a video isn’t muted, and users can adjust settings to block autoplay properties completely.