Skip to main content

Live Examples

Interactive demonstrations of React Lite YouTube Embed with various configurations.

Basic Embed​

Simple usage with privacy-enhanced mode and default settings.

<LiteYouTubeEmbed
  id="dQw4w9WgXcQ"
  title="Rick Astley - Never Gonna Give You Up"
/>

High Quality Thumbnail​

Maximum resolution thumbnail for hero sections and featured content.

<LiteYouTubeEmbed
  id="1RKqOmSkGgM"
  title="Chappell Roan - Good Luck, Babe!"
  poster="maxresdefault"
/>

Custom Aspect Ratio (4:3)​

Classic TV format for older video content.

<LiteYouTubeEmbed
  id="Fk-4lXLM34g"
  title="Kate Bush - Wuthering Heights"
  aspectWidth={4}
  aspectHeight={3}
/>

Playlist Embed​

Embed entire YouTube playlists with custom cover image.

<LiteYouTubeEmbed
  id="PLvFsG9gYFxY9zTBhcFmMcYa3zYfQz7P7F"
  title="Science SONGS"
  playlist={true}
  playlistCoverId="3HRkKznJoZA"
  poster="hqdefault"
/>

Lazy Loading​

Thumbnail loads only when scrolled into viewport for better performance.

<LiteYouTubeEmbed
  id="RB-RcX5DS5A"
  title="Coldplay - The Scientist"
  lazyLoad={true}
/>

WebP Format​

Using WebP format for better compression and smaller file sizes.

<LiteYouTubeEmbed
  id="8AHCfZTRGiI"
  title="Johnny Cash - Hurt"
  poster="hqdefault"
  webp={true}
/>

SEO Enhanced​

Includes JSON-LD structured data for search engines and rich results.

<LiteYouTubeEmbed
  id="CJ54eImz88w"
  title="Talking Heads - Psycho Killer"
  seo={{
    name: "Talking Heads - Psycho Killer",
    description: "Official video of Talking Heads performing Psycho Killer from the album Talking Heads: 77",
    uploadDate: "2018-12-05T08:00:00Z",
    duration: "PT4M36S"
  }}
/>

Start Time Parameter​

Start video at a specific time using the params prop.

<LiteYouTubeEmbed
  id="VdQY7BusJNU"
  title="Cyndi Lauper - Time After Time"
  poster="maxresdefault"
  params="start=114"
/>

Player Control​

Programmatic player control using the iframe's postMessage API.

<LiteYouTubeEmbed
  id="K4dx42YzQCE"
  title="The White Stripes - The Hardest Button To Button"
/>

Enhanced Accessibility​

Internationalization support and improved keyboard navigation.

<LiteYouTubeEmbed
  id="aXJ_Ub1xbhw"
  title="Pitty - Admirável Chip Novo"
/>

Event Handling​

Comprehensive event handling for player state changes.

<LiteYouTubeEmbed
  id="eBG7P-K-r1Y"
  title="Foo Fighters - Everlong"
/>

Grid Layout​

Multiple videos in a responsive grid with lazy loading.

<div style={{
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
  gap: '1.5rem'
}}>
  <LiteYouTubeEmbed id="..." title="..." poster="mqdefault" lazyLoad={true} />
  <LiteYouTubeEmbed id="..." title="..." poster="mqdefault" lazyLoad={true} />
  <LiteYouTubeEmbed id="..." title="..." poster="mqdefault" lazyLoad={true} />
  <LiteYouTubeEmbed id="..." title="..." poster="mqdefault" lazyLoad={true} />
</div>

Performance Notes​

Why So Fast?

Each video above loaded only a thumbnail (~10-50KB) instead of a full YouTube iframe (~500KB+). Click any video to see the real player load instantly!

More Resources​