Video

a video player

NaN:NaN

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

autoPlay

Enables automatic playback of the video as soon as it is loaded.

truefalse

controls

Whether to show playback controls and where to place them.

false"over""below"

fit

How the image fills its container.

"cover""contain"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

loop

Enables continuous video looping.

truefalse

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

mute

Enables video muting. This option is best used with the autoPlay flag.

truefalse

Theme

global.edgeSize.responsiveBreakpoint

The actual breakpoint to trigger changes in the video component layout.

"small"

global.edgeSize.xsmall

The width of the video scrubber.

"6px"

video.captions.background

The caption background color of the video

"rgba(0, 0, 0, 0.7)"

video.scrubber.color

The background color of the video scrubber.

"light-4"

video.extend

Any additional style for Video.

"any CSS"

(props) => {}