wistia-video

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/html @videojs/wistia-video

import '@videojs/html/media/wistia-video';

Or load it from the CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-beta.32/media/wistia-video.js"></script>

Load a source

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

<wistia-video src="https://example.wistia.com/medias/abcde12345?wtime=30"></wistia-video>

Wistia options

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

const video = document.querySelector('wistia-video');
video.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 />;
}

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

<wistia-video class="wistia-video" src="https://wesleyluyten.wistia.com/medias/oifkgmxnkb" controls></wistia-video>

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

import '@videojs/html/media/wistia-video';