# gds-video

`gds-video` is a custom video element that provides configurable .mp4 video playback that can be used as background or hero video without controls.
The video can be customized with different properties like ratio, position, inset, width, height, opacity, fit, and radius.

**Class**: `GdsVideo`

**Tag**: `<gds-video>`


## Properties

> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `'aspect-ratio'` | `string \| undefined` | `-` | Controls the aspect ratio of the image. Supports all common aspect ratios like 16/9, 4/3, 1/1, etc.  You can apply the aspect ratio like this:  ```html <gds-video aspect-ratio="16/9"></gds-video> ```  The above example will apply the aspect ratio of 16/9.  You can also apply different aspect ratios for different screen sizes like this:  ```html <gds-video aspect-ratio="l{16/9} m{4/3} s{1/1}"></gds-video> ```   The above example will apply the aspect ratio of 16/9 for large screens, 4/3 for medium screens, and 1/1 for small screens. |
| `'object-position'` | `string \| undefined` | `-` | Controls the `object-position` of the video. Supports all common CSS values. |
| `opacity` | `string \| undefined` | `-` | Controls the opacity property of the image.  You can apply opacity like this:  ```html <gds-img opacity="0.2"></gds-img> ```  The above example will apply the opacity style of 0.2. This is useful when you want to apply a transparent effect to the image when having a darkened background to increase the readability of the text. |
| `'object-fit'` | `string \| undefined` | `-` | Controls the object-fit property of the image.  You can apply fit like this:  ```html <gds-img object-fit="cover"></gds-img> ```   The above example will apply the object-fit style of cover. |
| `'pointer-events'` | `string \| undefined` | `-` | Controls the pointer-events property of the video. Supports all valid CSS pointer-events values. |
| `'border-radius'` | `string \| undefined` | `-` | Controls the border-radius property of the video. Supports all the size tokens from the design system. |
| `src` | `string \| undefined` | `-` |  |
| `poster` | `string \| undefined` | `-` |  |
| `muted` | `boolean \| undefined` | `-` |  |
| `playsinline` | `boolean \| undefined` | `-` |  |
| `autoplay` | `boolean \| undefined` | `-` |  |
| `loop` | `boolean \| undefined` | `-` |  |
| `videoElement` | `HTMLVideoElement` | `-` |  |
| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
| `height` | `string \| undefined` | `-` | Style Expression Property that controls the `height` property. Supports space tokens and all valid CSS `height` values. |
| `'min-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-height` property. Supports space tokens and all valid CSS `min-height` values. |
| `'max-height'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-height` property. Supports space tokens and all valid CSS `max-height` values. |
| `'block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `block-size` property. Supports space tokens and all valid CSS `block-size` values. |
| `'min-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-block-size` property. Supports space tokens and all valid CSS `min-block-size` values. |
| `'max-block-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-block-size` property. Supports space tokens and all valid CSS `max-block-size` values. |
| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |
| `position` | `string \| undefined` | `-` | Style Expression Property that controls the `position` property. Supports all valid CSS `position` values. |
| `transform` | `string \| undefined` | `-` | Style Expression Property that controls the `transform` property. Supports all valid CSS `transform` values. |
| `inset` | `string \| undefined` | `-` | Style Expression Property that controls the `inset` property. Supports all valid CSS `inset` values. |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |


## Methods

### `applyVideoSettings(): void`