YouTube Component

The YouTube component provides optimized video embedding with automatic thumbnail loading, custom play buttons, and performance optimizations. Choose between two implementation options to best suit your needs.

Key Features

• Performance Optimized: Lazy-loaded iframes and smart resource preloading

• SEO-Friendly: Includes structured data and semantic markup

• Customizable: Supports custom thumbnails and player parameters

Implementation Options

1
<YouTube src="dQw4w9WgXcQ" title="Never Gonna Give You Up" thumbnailQuality="high" />

The YouTube component offers:

• Custom play button styling
• Structured data support
• Simplified prop-based configuration
• Enhanced thumbnail options

1
<lite-youtube videoid="dQw4w9WgXcQ" playlabel="Play: Never Gonna Give You Up"></lite-youtube>

The lite-youtube component provides:

• Optimized for YouTube Shorts
• Extremely lightweight
• Mobile-first approach

To read more about the lite-youtube component, please visit the lite-youtube documentation.

Component API

YouTube Component Props

Functions

The component exposes the following function for you to use:

1
play(): Promise<void>;

Usage Examples

Basic Implementation

1
<YouTube src="dQw4w9WgXcQ" />

Advanced Configuration

1
<YouTube
2
    src="dQw4w9WgXcQ"
3
    title="Never Gonna Give You Up"
4
    description="Rick Astley's iconic music video"
5
    thumbnailQuality="max"
6
    params="start=30&autoplay=1"
7
    buttonProps={{
8
        class: "custom-play-button",
9
        variant: "secondary"
10
    }}
11
/>

With Structured Data

1
<YouTube
2
    src="dQw4w9WgXcQ"
3
    title="Never Gonna Give You Up"
4
    description="Rick Astley's iconic music video"
5
    uploadDate={new Date('1987-07-27')}
6
    structuredData={true}
7
/>

Performance Optimizations

The YouTube component implements several performance optimizations:

1. Smart Resource Loading

   • Defers iframe creation until play
   • Preconnects to required domains
   • Lazy loads high-quality thumbnails

2. Reduced Network Impact

   • Uses youtube-nocookie.com domain
   • Optimizes API loading
   • Minimizes initial page load

3. Progressive Enhancement

   • Starts with static thumbnail
   • Upgrades to WebP when available
   • Gracefully falls back when needed

Best Practices

1. Video Loading

   • Use appropriate thumbnail quality
   • Consider mobile data usage
   • Implement lazy loading for off-screen videos

2. Accessibility

   • Always provide descriptive titles
   • Include meaningful play labels
   • Ensure keyboard navigation support

3. Performance

   • Limit videos per page
   • Use thumbnail quality appropriately
   • Consider mobile viewers