Video

a video player

Props

a11yTitle

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

string

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

string

"start"

"center"

"end"

"stretch"

"baseline"

autoPlay

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

boolean

true

false

controls

Whether to show playback controls and where to place them.

boolean

false

string

"over"

"below"

object

Allows for users to order, pick, and customize the controls.


{
  position: boolean | "over" | "below",
  items: [
    "captions" | "fullScreen" | "play" | "pause" | "volume",
    {
      icon: <Element />,
      a11yTitle: string,
      onClick: function,
    }
  ]
}

fit

How the image fills its container.

string

"cover"

"contain"

gridArea

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

string

"a parent grid area name"

loop

Enables continuous video looping.

boolean

true

false

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


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

messages

Custom messages. Used for accessibility by screen readers.

object


{
  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.

boolean

true

false

React/DOM Properties

At its core, the Video component is a regular <video> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for video elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.edgeSize.responsiveBreakpoint

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

string

"small"

global.edgeSize.xsmall

The width of the video scrubber.

string

"6px"

video.captions.background

The caption background color of the video

string

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

video.icons.closedCaption

The icon to use for the caption.

element

<ClosedCaption />

video.icons.configure

The icon to use for the configuration action.

element

<Actions />

video.icons.fullScreen

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

element

<Expand />

video.icons.pause

The icon to use for pausing the video.

element

<Pause />

video.icons.play

The icon to use for playing the video.

element

<Play />

video.icons.reduceVolume

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

element

<VolumeLow />

video.icons.volume

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

element

<Volume />

video.scrubber.color

The background color of the video scrubber.

string

"light-4"

video.extend

Any additional style for Video.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}