Skip to content

feat: YouTube provider#16

Merged
karngyan merged 1 commit into
mainfrom
feat/youtube-provider
Jun 28, 2026
Merged

feat: YouTube provider#16
karngyan merged 1 commit into
mainfrom
feat/youtube-provider

Conversation

@karngyan

Copy link
Copy Markdown
Collaborator

What

Adds a YouTube provider@karnstack/kino/youtube puts kino's glass chrome over the YouTube IFrame Player API.

import { YouTubePlayer } from "@karnstack/kino/youtube"
<YouTubePlayer videoId="dQw4w9WgXcQ" />
  • createYouTubeProvider, <YouTubePlayer>, and a parseYouTubeId helper (bare id or any watch / youtu.be / embed / shorts URL).
  • No runtime dependency — the IFrame API is loaded on demand. New ./youtube entry + tsdown build.

Works through kino's chrome

Play/pause, seek, speed, volume, fullscreen, keyboard map, and a captions menu (driven by the video's own subtitle tracks, rendered by YouTube inside the embed). Buffering is mapped to "not paused" so a stall doesn't read as a pause. controls:0 + pointer-events:none on the iframe keep YouTube's hover chrome and second progress bar from showing.

Follows YouTube's API terms

Plays through the official IFrame API and does not obscure the player — YouTube's own thumbnail, play button, title, and logo show before playback and while paused. Quality, picture-in-picture, and scrub-preview storyboards are hidden because the IFrame API doesn't expose them.

Docs / demo

  • README reframed away from "Mux is the first provider" → three shipped providers (Mux, Native, YouTube), with a YouTube section + props table.
  • Providers page marks YouTube shipped; overview + install pages updated.
  • Live studio gets a YouTube tab.
  • Design spec under docs/superpowers/specs/. Changeset: minor.

Verification

  • 83 tests pass (22 new for the YouTube provider, incl. a regression test for the pre-onReady poll crash and the buffering-not-paused mapping).
  • typecheck, lint, library build, and demo build all clean.
  • Verified live in a real browser: video plays, captions menu surfaces the real track list (English/German/Japanese/Portuguese/Spanish), and the paused frame shows without a poster cover.

🤖 Generated with Claude Code

Add @karnstack/kino/youtube — kino's glass chrome over the YouTube IFrame
Player API. <YouTubePlayer videoId="…" /> plus createYouTubeProvider and a
parseYouTubeId helper that accepts a bare id or any watch / youtu.be / embed /
shorts URL. No runtime dependency; the API is loaded on demand.

Play/pause, seek, speed, volume, fullscreen, keyboard map, and a captions menu
(driven by the video's own subtitle tracks, rendered by YouTube inside the
embed) all work through kino's controls. Buffering is mapped to "not paused" so
a stall doesn't read as a pause. controls:0 plus pointer-events:none on the
iframe keep YouTube's hover chrome and second progress bar from showing.

Follows YouTube's API terms — plays through the official IFrame API and does not
obscure the player, so YouTube's own thumbnail, play button, title, and logo
show before playback and while paused. Quality, picture-in-picture, and
scrub-preview storyboards are hidden because the IFrame API doesn't expose them.

Docs/demo: reframe the README away from "Mux is the first provider" to three
shipped providers (Mux, Native, YouTube), add a YouTube section and props,
mark YouTube shipped on the providers page, and add a YouTube tab to the live
studio.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
kino 662c59b Commit Preview URL

Branch Preview URL
Jun 28 2026, 09:57 AM

@karngyan karngyan merged commit c26bbe9 into main Jun 28, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant