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": "..."
}

messages

Custom messages. Used for accessibility by screen readers.

{

closeMenu:

"string,"

fullScreen:

"string,"

progressMeter:

"string,"

openMenu:

"string,"

pauseButton:

"string,"

playButton:

"string,"

scrubber:

"string,"

volumeDown:

"string,"

volumeUp: string

}

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.icons.closedCaption

The icon to use for the caption.

video.icons.configure

The icon to use for the configuration action.

video.icons.fullScreen

The icon to use for viewing the video in full screen.

video.icons.pause

The icon to use for pausing the video.

video.icons.play

The icon to use for playing the video.

video.icons.reduceVolume

The icon to use for the action of lowering the volume.

video.icons.volume

The icon to use for the action of raising the volume.

video.scrubber.color

The background color of the video scrubber.

"light-4"

video.extend

Any additional style for Video.

"any CSS"

(props) => {}