Video player
v2.0
The video player is used for displaying and controlling video content.
- Skin
- Marko
- React
The video player is used for displaying and controlling video content.
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.
The orientation of the player can be landscape 16:9 or portrait 9:16. Landscape is the default.
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.
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.
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.
Hovering or focusing on an icon reveals a tooltip with the button label.
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 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 videos can play inline or in a lightbox with an option to go full screen.
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.
