YouTubePlayer

Plays a YouTube video through the YouTube IFrame Player API, with the HUD MediaControls instead of YouTube's own controls.

import { YouTubePlayer } from 'jarvis-react-ui';

Basic

Pass the video id from the URL (youtube.com/watch?v=<videoId>). The controls are enabled once the player is ready. start begins at a position in seconds; the ref is the same MediaHandle as MediaPlayer's.

import { YouTubePlayer } from 'jarvis-react-ui';

export default function Basic() {
    return <YouTubePlayer videoId="aqz-KE-bpKQ" title="Big Buck Bunny · Blender Foundation" />;
}

In a floating window

A typical assistant flow: the user asks for a video, the app looks up its id and opens a floating window with the player.

import { useState } from 'react';
import { Button, WindowManager, YouTubePlayer } from 'jarvis-react-ui';
import type { ManagedWindow } from 'jarvis-react-ui';

export default function InWindow() {
    const [windows, setWindows] = useState<ManagedWindow[]>([]);

    const open = () =>
        setWindows([
            {
                id: 'video',
                title: 'Now playing',
                floating: true,
                defaultRect: { x: 24, y: 70, w: 420, h: 330 },
                itemRenderer: () => <YouTubePlayer videoId="aqz-KE-bpKQ" size="sm" autoPlay />,
            },
        ]);

    return (
        <>
            <div className="absolute top-3 left-3 z-[1]">
                <Button variant="primary" onClick={open} disabled={windows.length > 0}>
                    Show video
                </Button>
            </div>
            <WindowManager
                windows={windows}
                assignments={{}}
                onAssignmentsChange={() => undefined}
                onClose={() => setWindows([])}
            />
        </>
    );
}

External script and privacy

Warning: Loads code from YouTube

On first mount the component adds the script https://www.youtube.com/iframe_api to the page (once; an existing window.YT is reused). The video itself is served by YouTube. By default it uses the privacy-enhanced host youtube-nocookie.com, which sets no cookies until the video plays; privacyEnhanced={false} uses youtube.com. Mention the embed in your privacy notice and allow both hosts in a Content Security Policy (script-src, frame-src).

When a video cannot be embedded

Some owners disable embedding (error 101 or 150). The player then shows Embedding is disabled for this video with a Watch on YouTube link. Invalid ids, removed videos and a blocked script show their own message; onError receives the code.

Sound

The controls play hover_button, click, drag_start and drag_end through the nearest SfxProvider. See Sound effects.

Accessibility

• YouTube's own controls and keyboard shortcuts are turned off; the HUD controls and their shortcuts (K, M, ←, →) replace them.
• Error messages are announced through role="alert".
• Captions are controlled by YouTube's settings for the video.

API

Also accepts inherited props from RefAttributes (1), Attributes (1).