Skip to main contentGatsby theme Carbon

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

propertypropTyperequireddefaultdescription
vimeoIdstringTo 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 (/).
srcstringUse the html <video> player with a local .mp4 video
titlestringVimeo title
posterstringProvides 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.
autoPlaybooleanWhether or not the video should autoplay.