Video player
The video player is used for displaying and controlling video content.
- Skin
- CoreUI
- React
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.
- Play trigger
- Scrim
- Playhead
- Play/pause
- Time elapsed
- Progress indicator
- Duration
- Closed captions
- Volume
- Report
- Expand/collapse
- Overflow
- Volume slider
- Close button
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.
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.
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.
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.
