Skip to content
FrameworkStyle

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

pnpm add @videojs/react @videojs/wistia-video
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.

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

<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

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 />;
}