[ @sdxc/ui ]

YouTubeEmbed

A YouTube player sized to its container.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

View code

<div mix={[is("full"), maxIs("36rem")]}>
	<YouTubeEmbed videoId="dQw4w9WgXcQ" title="Rick Astley — Never Gonna Give You Up" />
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { YouTubeEmbed } from "@sdxc/ui";

Renders the player filling its container's inline axis at 16:9. The frame always sends the embedding page's origin as referrer, without which YouTube refuses to play.

Examples

Start at a time

View code

<div mix={[is("full"), maxIs("36rem")]}>
	<YouTubeEmbed
		videoId="dQw4w9WgXcQ"
		start={43}
		title="Rick Astley — Never Gonna Give You Up, from the chorus"
	/>
</div>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`videoId`	`string`	The eleven-character id from the video's `watch?v=` or `youtu.be/` URL.
`start?`	`number`	Seconds into the video the player starts at; zero or less starts at the beginning.
`title`	`string`	The frame's accessible name, announced before a reader enters the player.

Also accepts everything in Omit< TagProps<"iframe">, "src" | "title" | "allow" | "referrerpolicy" | "referrerPolicy" >.