Video

View on GitHub

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

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

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

<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%"
/>

<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%"
/>

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 for more on the source element.

System Modifiers

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