The

<Video>

component can render a Vimeo player or a html video player.

Example

Vimeo

Video

Play

Video in MDX

Play

Code

Vimeo

<Video title="Carbon homepage video" vimeoId="322021187" />
Copy to clipboard

Video

<Video src="/videos/hero-video.mp4" poster="/images/poster.png">
  <track
    kind="captions"
    default
    src="/videos/vtt/hero-video.vtt"
    srcLang="en"
  />
</Video>
Copy to clipboard

Video in MDX

import localVideo from './local-video.mp4';
import localPoster from './local-poster.jpg';

<Video src={localVideo} poster={localPoster} />
Copy to clipboard

Props

| property | propType | required | default | description | | -------- | ---------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | vimeoId | string | | | To find your

vimeoId

, go to the Vimeo page and find the video you want to put on your website. Once it is loaded, look at the URL and look for the numbers that come after the slash (/). | | src | string | | | Use the html

<video>

player with a local

.mp4

src

| | children |

<track>

| | | non-vimeo only – Provide

.vtt

file in your static directory to make your videos more accessible. Then add a track element with a src pointing to it Check out this simple tutorial for getting started with writing vtt files. | | autoPlay | boolean | | | Whether or not the video should autoplay. |

Edit this page on GitHub

Components: Title