# Video player: Captions

> Add a `<track>` and `VideoPlayerCaptionsButton`. Captions are drawn by the player, so they move up while the controls show instead of hiding behind them. A cross-origin track needs `crossOrigin` on the video.

Example: https://hextaui.com/docs/video-player/examples/captions
Component docs: https://hextaui.com/docs/video-player.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/video-player-captions.json
```

This adds `components/examples/video-player/captions.tsx` with the Video player component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/video-player/captions.tsx"
import {
  VideoPlayer,
  VideoPlayerCaptionsButton,
  VideoPlayerContent,
  VideoPlayerControls,
  VideoPlayerFullscreenButton,
  VideoPlayerPlayButton,
  VideoPlayerSeekBar,
  VideoPlayerSpacer,
  VideoPlayerTime,
  VideoPlayerVolume,
} from "@/components/ui/video-player"

export function VideoPlayerCaptions() {
  return (
    <VideoPlayer className="max-w-xl">
      <VideoPlayerContent
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
        crossOrigin="anonymous"
        aria-label="Friday"
      >
        <track
          default
          kind="captions"
          srcLang="en"
          label="English"
          src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt"
        />
      </VideoPlayerContent>
      <VideoPlayerControls>
        <VideoPlayerSeekBar />
        <VideoPlayerPlayButton />
        <VideoPlayerVolume />
        <VideoPlayerTime />
        <VideoPlayerSpacer />
        <VideoPlayerCaptionsButton />
        <VideoPlayerFullscreenButton />
      </VideoPlayerControls>
    </VideoPlayer>
  )
}
```

## More Video player examples

- [Bar](https://hextaui.com/docs/video-player/examples/bar.md)
- [Minimal](https://hextaui.com/docs/video-player/examples/minimal.md)
- [Seek offsets and speeds](https://hextaui.com/docs/video-player/examples/seek-offsets.md)
- [Page-wide shortcuts](https://hextaui.com/docs/video-player/examples/global-shortcuts.md)
- [Custom controls](https://hextaui.com/docs/video-player/examples/custom-controls.md)
- [Error](https://hextaui.com/docs/video-player/examples/error.md)
- [Right to left](https://hextaui.com/docs/video-player/examples/rtl.md)