# 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

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


## Methods

### `applyVideoSettings(): void`
