# WistiaVideo

Video component that plays Wistia-hosted videos through Wistia's web component

`WistiaVideo` adapts Wistia’s own `<wistia-player>` web component to the Video.js media contract. Wistia’s chrome stays hidden by default so a Video.js player skin can control playback; set `controls` to use Wistia’s UI.

## Import

```bash
pnpm add @videojs/wistia-video
```

```tsx
import { WistiaVideo } from '@videojs/react/media/wistia-video';
```

## Load a source

`src` accepts a Wistia media URL or hashed media ID. A `wtime` query parameter sets the initial playback position.

```tsx
<WistiaVideo src="https://example.wistia.com/medias/abcde12345?wtime=30" />
```

## Wistia options

Pass Wistia player options through `source`. `mediaId` selects the media; other properties such as `playerColor`, `qualityMin`, and `roundedPlayer` are forwarded to Wistia.

```tsx
<WistiaVideo
  source={{
    mediaId: 'abcde12345',
    playerColor: '54bbff',
    qualityMin: 540,
  }}
/>
```

## Behavior

- Every Wistia media is treated as on-demand video. Live windows, remote playback, and picture-in-picture are unavailable.
- `controls` switches Wistia’s own chrome and pointer interaction on. Without it, pointer events pass through to the Video.js skin.
- `loop`, `muted`, `autoplay`, `poster`, and `preload` are translated to Wistia’s option names. Wistia always plays inline, so `playsInline` has no additional effect.
- Changing the media ID loads a new Wistia player. Changing only player options keeps the current player and playback session.

## Examples

### Basic Usage

**App.tsx**

```tsx
import { WistiaVideo } from '@videojs/react/media/wistia-video';

export default function BasicUsage() {
  return <WistiaVideo className="wistia-video" src="https://wesleyluyten.wistia.com/medias/oifkgmxnkb" controls />;
}
```

**App.css**

```css
.wistia-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}
```

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt