twitch-video

The Twitch embed player handles both recorded videos and live channels. Its own chrome stays hidden by default, so it drops into a player skin like any other media component; set controls to use Twitch’s UI instead.

Import

pnpm add @videojs/react @videojs/twitch-video

pnpm add @videojs/html @videojs/twitch-video

import { TwitchVideo } from '@videojs/react/media/twitch-video';

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

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

Load a source

src takes a video URL (twitch.tv/videos/<id>) or a channel URL (twitch.tv/<channel>), with or without the www. and go. hosts. A channel URL plays the channel’s live stream. Clips (clips.twitch.tv) are a different embed and aren’t supported.

<TwitchVideo src="https://www.twitch.tv/videos/106400740" />

<twitch-video src="https://www.twitch.tv/videos/106400740"></twitch-video>

Live channels

A channel embed behaves like a live media component:

• duration reports Infinity while the stream is live.
• Seeking is unavailable: the embed exposes no DVR window.
• The stream going away and coming back dispatch offline and online events.
• loop never repeats a channel; a live stream doesn’t end.

Parent hostnames

Twitch checks the embedding page’s ancestors against a parent allowlist and won’t play unless the current page is on it. The element always includes your page’s own hostname, so a plain embed needs no setup. When your player is itself framed by other hostnames, name each of them under engine.twitch.parent:

<TwitchVideo
  source={{
    src: 'https://www.twitch.tv/videos/106400740',
    engine: { twitch: { parent: ['embed.example.com'] } },
  }}
/>

const video = document.querySelector('twitch-video');
video.source = {
  src: 'https://www.twitch.tv/videos/106400740',
  engine: { twitch: { parent: ['embed.example.com'] } },
};

Behavior

• Volume and mute both work, like a native <video>.
• playbackRate is reported but never applied: the embed has no rate command.
• loop restarts a finished video from the top; the embed has no loop parameter.
• controls is read when the embed is built; changing it later doesn’t take effect, since rebuilding the iframe would lose the playback session.
• Fullscreen targets the iframe, so Twitch’s own chrome shows in fullscreen.

Examples

Basic Usage

import { TwitchVideo } from '@videojs/react/media/twitch-video';

export default function BasicUsage() {
  return (
    <div className="twitch-video">
      <TwitchVideo src="https://www.twitch.tv/videos/106400740" controls />
    </div>
  );
}

.twitch-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

<twitch-video class="twitch-video" src="https://www.twitch.tv/videos/106400740" controls></twitch-video>

.twitch-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

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