@dotconnor/grommet

## Video A video player. [![](https://cdn-images-1.medium.com/fit/c/120/120/1*TD1P0HtIH9zF0UEH28zYtw.png)](https://storybook.grommet.io/?selectedKind=Media-Video&full=0&stories=1&panelRight=0) [![](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/video&module=%2Fsrc%2FVideo.js) ## Usage ```javascript import { Video } from 'grommet'; <Video /> ``` ## Properties **a11yTitle** Custom label to be used by screen readers. When provided, an aria-label will be added to the element. ``` string ``` **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 ``` **gridArea** The name of the area to place this inside a parent Grid. ``` string ``` **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. ``` none xxsmall xsmall small medium large xlarge { bottom: xxsmall xsmall small medium large xlarge string, end: xxsmall xsmall small medium large xlarge string, horizontal: xxsmall xsmall small medium large xlarge string, left: xxsmall xsmall small medium large xlarge string, right: xxsmall xsmall small medium large xlarge string, start: xxsmall xsmall small medium large xlarge string, top: xxsmall xsmall small medium large xlarge string, vertical: xxsmall xsmall small medium large xlarge string } string ``` **autoPlay** Enables automatic playback of the video as soon as it is loaded. ``` boolean ``` **controls** Whether to show playback controls and where to place them. Defaults to `over`. ``` false over below ``` **fit** How the image fills its container. ``` cover contain ``` **loop** Enables continuous video looping. ``` boolean ``` **mute** Enables video muting. This option is best used with the autoPlay flag. ``` boolean ``` **messages** Custom messages. Used for accessibility by screen readers. Defaults to `{ "closeMenu": "close menu", "fullScreen": "full screen", "progressMeter": "video progress", "scrubber": "scrubber", "openMenu": "open menu", "pauseButton": "pause", "playButton": "play", "volumeDown": "volume down", "volumeUp": "volume up" }`. ``` { closeMenu: string, fullScreen: string, progressMeter: string, openMenu: string, pauseButton: string, playButton: string, scrubber: string, volumeDown: string, volumeUp: string } ``` ## Intrinsic element ``` video ``` ## Theme **global.edgeSize.responsiveBreakpoint** The actual breakpoint to trigger changes in the video component layout. Expects `string`. Defaults to ``` small ``` **global.edgeSize.xsmall** The width of the video scrubber. Expects `object`. Defaults to ``` 6px ``` **video.captions.background** The caption background color of the video Expects `string`. Defaults to ``` rgba(0, 0, 0, 0.7) ``` **video.icons.closedCaption** The icon to use for the caption. Expects `React.Element`. Defaults to ``` <ClosedCaption /> ``` **video.icons.configure** The icon to use for the configuration action. Expects `React.Element`. Defaults to ``` <Actions /> ``` **video.icons.fullScreen** The icon to use for viewing the video in full screen. Expects `React.Element`. Defaults to ``` <Expand /> ``` **video.icons.pause** The icon to use for pausing the video. Expects `React.Element`. Defaults to ``` <Pause /> ``` **video.icons.play** The icon to use for playing the video. Expects `React.Element`. Defaults to ``` <Play /> ``` **video.icons.reduceVolume** The icon to use for the action of lowering the volume. Expects `React.Element`. Defaults to ``` <VolumeLow /> ``` **video.icons.volume** The icon to use for the action of raising the volume. Expects `React.Element`. Defaults to ``` <Volume /> ``` **video.scrubber.color** The background color of the video scrubber. Expects `string`. Defaults to ``` light-4 ``` **video.extend** Any additional style for Video. Expects `string | (props) => {}`. Defaults to ``` undefined ```