# Video player: Bar

> `variant="bar"` puts the controls under the picture on the page surface. They never hide or cover the video.

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

## Add this example

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

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

## Source

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

export function VideoPlayerBar() {
  return (
    <VideoPlayer variant="bar" className="max-w-2xl">
      <VideoPlayerContent
        poster="https://media.w3.org/2010/05/sintel/poster.png"
        aria-label="Sintel trailer"
      >
        <source
          src="https://media.w3.org/2010/05/sintel/trailer.webm"
          type="video/webm"
        />
        <source
          src="https://media.w3.org/2010/05/sintel/trailer.mp4"
          type="video/mp4"
        />
      </VideoPlayerContent>
      <VideoPlayerControls>
        <VideoPlayerSeekBar />
        <VideoPlayerPlayButton />
        <VideoPlayerSeekButton offset={-10} />
        <VideoPlayerSeekButton offset={10} />
        <VideoPlayerVolume />
        <VideoPlayerTime />
        <VideoPlayerSpacer />
        <VideoPlayerPlaybackRate />
        <VideoPlayerPictureInPictureButton />
        <VideoPlayerFullscreenButton />
      </VideoPlayerControls>
    </VideoPlayer>
  )
}
```

## Props in this example

### VideoPlayer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"overlay" \| "bar"` | `"overlay"` | overlay floats auto-hiding controls over the video. bar puts them below it. |

### VideoPlayerSeekButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `offset` | `number` | `10` | Seconds to jump. Negative values go back. |

## More Video player examples

- [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)
- [Captions](https://hextaui.com/docs/video-player/examples/captions.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)