VideoEmbed

A YouTube video that loads on play.

An interactive page: C# runs over a Blazor Server connection.

A YouTube video that loads only when played: a poster image with a play button, which is a link to the video on YouTube. With script, clicking swaps in the player (from youtube-nocookie.com) in place, so pages don't load YouTube's player, and its cookies, until someone wants it.

Usage

razor

<VideoEmbed YouTubeId="dQw4w9WgXcQ" Label="Building a form in IzzyBlazor" />

Playing a video

Use YouTubeId and Label: the poster shows first, and YouTube's player loads only on play.

Preview Code

Preview

Code

Play.razor

<VideoEmbed YouTubeId="aqz-KE-bpKQ" Label="Big Buck Bunny" Grow MaxWidth="32.Rem" />

Not out yet

Leave out YouTubeId to keep the space for a video that isn't out yet, with EmptyText in the middle.

Preview Code

Preview

Coming Friday

Code

Upcoming.razor

<VideoEmbed Label="Deploying to Azure" EmptyText="Coming Friday" Grow MaxWidth="32.Rem" />

Mode support

What works in each mode, VideoEmbed
Feature	Off	Static	Live
Everything	Partly	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto). With JavaScript off, the play button opens the video on YouTube instead of playing it in place.

Accessibility

Before play, the poster is a link named "Play video: " and Label (PlayLabel); the poster image and play icon are hidden.
With script, a click or Enter swaps in the player in place, titled with Label, and moves focus to it.
With JavaScript off, or with a modifier key held, the link opens the video on YouTube.
The player starts playing as it opens; its controls and captions are YouTube's.
With no YouTubeId, it's a group named by Label with its "Coming soon" text, and nothing to focus.

Parameters

VideoEmbed parameters
Prop	Type	Default
`YouTubeId`The video's id, the 11 characters after v= in its URL.	`string?`
`Label`The video's name, usually its title: the player's accessible name and the play button's.	`string`	Required
`Poster`The poster image.	`string?`	`computed`
`Ratio`Width over height.	`double`	`1.7777777777777777`
`PlayLabel`The play button's name, with {0} for the title.	`string?`	`"Play video: {0}"`
`EmptyContent`Shown over the poster while there's no YouTubeId, in place of EmptyText.	`RenderFragment?`
`EmptyText`Shown while there's no YouTubeId.	`string?`	`"Coming soon"`

Plus 25 surface props, 16 item props and 4 common props.

Full API