---
title: "Components — Video"
canonical: https://sky-ui.cf.sky.com/components/video
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Video

Video component used for displaying and setting properties to videos.

```js
import { Video } from '@sky-uk/ui-core';
```

---

The `Video` component is a styled HTML `video` element and as such expects a `src` attribute containing a url to a video file. It's recommended to use `video/mp4` format for greatest support however you can provide multiple `source` elements if required, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) for more.

```tsx
<Video src="https://test-videos.co.uk/vids/jellyfish/mp4/h264/360/Jellyfish_360_10s_1MB.mp4" $width="100%" />
```

---

## Responsive Videos

As with Images, an object with keys that map to any of our breakpoints (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`) can be passed to the `src` prop. This allows the consumer to set a different video source based on the width of the window.

```tsx
<Video
  src={{
    xs: "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4",
    lg: "https://test-videos.co.uk/vids/jellyfish/mp4/h264/360/Jellyfish_360_10s_1MB.mp4"
  }}
  $width="100%"
/>
```

**Important:** The approach of providing responsive `src` doesn't allow the browser to preload or handle loading of assets gracefully. This can sometimes lead to flicker as the browser swaps and downloads the new asset on resize.
  In those cases `source` with `sizes` may be a more effective way to provide responsive sources,
  particularly when there are no changes to aspect ratio. [See
  here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) for more on the `source`
  element.

---

## System Modifiers

The `Video` component also supports the props applied using the following system modifiers:

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [grid-child](/core/system/grid-child/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [object-fit](/core/system/object-fit/)
- [width](/core/system/width/)