YouTubeVideo

Atom component for embedding YouTube videos using a video ID. Creates an iframe embed with configurable parameters.

Props

Prop	Type	Required	Default	Description
`videoId`	`string`	Yes	-	YouTube video ID (e.g., "dQw4w9WgXcQ")
`title`	`string`	No	`'YouTube video player'`	Accessibility title for iframe
`rel`	`boolean`	No	`true`	Hide related videos from other channels (`rel=0`)
`modestbranding`	`boolean`	No	`true`	Use minimal YouTube branding
`playsinline`	`boolean`	No	`true`	Play inline on mobile devices
`$`	`CSLPFieldMapping`	No	-	CSLP mapping for Live Preview
`className`	`string`	No	`''`	Additional CSS classes

1import YouTubeVideo from '@/components/atoms/YouTubeVideo';
2
3<YouTubeVideo 
4  videoId="dQw4w9WgXcQ"
5  title="My Video Title"
6/>

import YouTubeVideo from '@/components/atoms/YouTubeVideo';

<YouTubeVideo 
  videoId="dQw4w9WgXcQ"
  title="My Video Title"
/>

Responsive: Uses aspect-video for 16:9 aspect ratio
Accessible: Includes proper iframe title and attributes
YouTube parameters: Supports rel, modestbranding, and playsinline parameters
CSLP support: Supports Contentstack Live Preview editing
Lazy loading: Uses loading="lazy" for performance

The component constructs the embed URL as:

https://www.youtube.com/embed/{videoId}?rel=0&modestbranding=1&playsinline=1

Parameters are only added when their corresponding props are set to true (default behavior).

Container: w-full my-4 with optional custom className
Video wrapper: relative w-full aspect-video overflow-hidden rounded-lg bg-surface-3
Iframe: absolute inset-0 w-full h-full border-0