Components / Media

YouTube Video

Component + manager

Embeds a YouTube video based on the provided video ID, handling loading states and error messages. Supports theme customization and responsive resizing.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentYouTubeVideo

Managercreate_youtube_video_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { YouTubeVideo, create_youtube_video_manager } from "sveltekit-ui"

  const manager = create_youtube_video_manager({
    video_id: "aqz-KE-bpKQ",
    is_dark_theme: false,
  })
</script>

<div style="max-width: 72rem;">
  <YouTubeVideo {manager} />
</div>

API reference

Configure the manager, call its methods, and read its reactive state.

3 entries in configuration

Property	Type	Default	Description
`id`	`string or null`	`generated unique ID`	A unique identifier for the YouTubeVideo component. If not provided, a unique ID is generated automatically.
`video_id`	`string`	`null`	The unique identifier of the YouTube video to embed. This is required for rendering the video.
`is_dark_theme`	`boolean`	`false`	Determines the theme of the embedded video. If true, applies a dark theme; otherwise, a light theme is used.