tiktok-video

Video component that plays TikTok videos through the TikTok embed player. TikTok videos are portrait, and the player won’t draw its chrome below 325×578, so the element starts at that size rather than the usual 300×150.

Load a source

src takes a TikTok video URL or a raw numeric video id. The @user/video/<id> URLs the app hands out, share/video/<id> links, and player/v1/<id> embed URLs all work.

<TikTokVideo src="https://www.tiktok.com/@_luwes/video/7527476667770522893" />

<tiktok-video src="https://www.tiktok.com/@_luwes/video/7527476667770522893"></tiktok-video>

Controls

TikTok always draws part of its own chrome: the center play button, author header, and social rail are always visible. controls adds the progress bar and control buttons on top of those. Without controls, the element ignores pointer events, so a player skin above it receives every click.

Deferred startup

TikTok builds its player lazily: until something starts playback, the embed has no video element, reports a duration of 0, and silently drops commands. The element works around this by starting a muted autoplay and pausing it immediately, so the embed answers play, pause, and seek before the first play.

Two settings opt out. preload="none" skips the warm-up, leaving the network untouched until the viewer presses play, and the controls inert until then. controls hands playback to TikTok’s own chrome instead.

Behavior

• Mute works, but there’s no volume control: the embed reports a level but takes no command to set one.
• No playback rate and no text tracks; captions are toggled with engine.tiktok.closed_caption.
• poster and playsInline never reach the embed: it always plays inline and draws the video’s own cover image.
• Changing controls or loop after the embed is up rebuilds it; rewriting the iframe URL is the only reload TikTok allows.

Examples

Basic Usage

import { TikTokVideo } from '@videojs/react/media/tiktok-video';

export default function BasicUsage() {
  return (
    <div className="tiktok-video">
      <TikTokVideo src="https://www.tiktok.com/@_luwes/video/7527476667770522893" controls />
    </div>
  );
}

/* TikTok videos are portrait: the element floors itself at 325x578. */
.tiktok-video {
  display: block;
  width: 325px;
  height: 578px;
  margin-inline: auto;
}

<tiktok-video
    class="tiktok-video"
    src="https://www.tiktok.com/@_luwes/video/7527476667770522893"
    controls
></tiktok-video>

/* TikTok videos are portrait: the element floors itself at 325x578. */
.tiktok-video {
  display: block;
  width: 325px;
  height: 578px;
  margin-inline: auto;
}

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

<TikTokVideo
  source={{
    src: 'https://www.tiktok.com/@_luwes/video/7527476667770522893',
    engine: { tiktok: { closed_caption: 0, rel: 1 } },
  }}
/>

const video = document.querySelector('tiktok-video');
video.source = {
  src: 'https://www.tiktok.com/@_luwes/video/7527476667770522893',
  engine: { tiktok: { closed_caption: 0, rel: 1 } },
};