react-youtube-jukebox

Floating player for React apps

Ship a YouTube jukebox that feels like product UI, not an embedded iframe afterthought. The package handles playback, queue rotation, theming, and portal rendering in one component.

Get Started Browse Examples

Portal by defaultTheme + chrome presetsCustom expanded panel

core package@react-youtube-jukebox/core

A focused package with one main export and a styles entrypoint that stays in sync with the docs app.

1Main component

4Corner positions

1Active chrome preset

01Install the packageAdd the package and stylesheet entry once.02Render your first jukeboxDrop in tracks and mount the default player.03Explore presets and layoutsCompare themes, chrome, and custom expansions.

import { Jukebox } from "@react-youtube-jukebox/core";

const tracks = [
  { videoId: "yTg4v2Cnfyo", title: "Soul Below", artist: "Ljones" },
  { videoId: "s4MQku9Mkwc", title: "Something About Us", artist: "Daft Punk" },
];

export function Page() {
  return <Jukebox tracks={tracks} theme="ride" chrome="classic" />;
}

Highlights

Dock-first interaction

Start compact, expand on demand, and keep playback controls close to the viewport edge instead of inside page content.

Theme without rewriting logic

Swap `theme` and `chrome` props to move from minimal glass to more character-heavy presets while keeping the same behavior.

Replace the expanded panel

Use `renderExpandedContent` when the built-in player shell is not enough and you need a custom layout around the same controls.