Video

The <Video> component can render a Vimeo player or a html video player.

Example

Vimeo

Video

Play

Video in MDX

Play

Code

Vimeo

components/Video/Video.js
<Video title="Carbon homepage video" vimeoId="322021187" />

Video

components/Video/Video.js
<Video src="/videos/hero-video.mp4" poster="/images/poster.jpg">
  <track
    kind="captions"
    default
    src="/videos/vtt/hero-video.vtt"
    srcLang="en"
  />
</Video>

Video in MDX

components/Video.mdx
import localVideo from './local-video.mp4';
import localPoster from './local-poster.jpg';
<Video src={localVideo} poster={localPoster} />

Props

property	propType	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` video
title	string	Vimeo title
poster	string	Provides an image to show before the video loads, only works with `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