YouTube Embed

A responsive YouTube embed with autoplay, looping, customizable controls, and an optional masked presentation.

The video begins automatically when autoplay is enabled. Since the embed is intended for decorative or showcase content, pointer interaction is disabled by default.

Options you can pass to customize this component.

Prop
Type
Description
videoId*
string

The YouTube video ID to embed. For example, 'DUV0KxkaIQU'.

autoPlay
boolean

Starts playback automatically when the component mounts.

mute
boolean

Mutes the video. Autoplay generally requires this to be enabled.

controls
boolean

Shows or hides the YouTube player controls.

loop
boolean

Repeats the video continuously after it finishes.

modestBranding
boolean

Reduces YouTube branding within the player when supported.

rel
boolean

Shows related videos after playback ends when enabled.

aspectRatio
string

CSS aspect-ratio applied to the container. Accepts any valid aspect ratio value.

mask
boolean

Applies the built-in radial mask effect to the embedded video.

className
string

Additional classes merged onto the outer container.

iframeClassName
string

Additional classes merged onto the iframe element.

npx shadcn add amitgajare2/ariseui/youtube-embed
YouTube Embed