React Lite YouTube Embed

Why This Component?

YouTube's standard iframe embed adds over 500KB and makes dozens of network requests before the user even clicks play. This component fixes that:

• ✅ Tiny – Under 5KB gzipped (JS + CSS)
• ✅ Fast – Loads only a thumbnail until user clicks
• ✅ Private – No YouTube cookies or tracking by default
• ✅ SEO-Friendly – Structured data for search engines
• ✅ Accessible – Full keyboard navigation and screen readers
• ✅ TypeScript – Complete type definitions

Basic Usage

Install

npm install react-lite-youtube-embed

Import and Use

import LiteYouTubeEmbed from 'react-lite-youtube-embed';
import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';

export default function App() {
  return (
    <LiteYouTubeEmbed
      id="dQw4w9WgXcQ"
      title="Rick Astley - Never Gonna Give You Up"
    />
  );
}

That's it! You now have a performant, private YouTube embed.

Pro Tips

Lazy Loading for Better Performance

<LiteYouTubeEmbed
  id="VIDEO_ID"
  title="Video Title"
  lazyLoad={true}
/>

Defers loading offscreen thumbnails, reducing bandwidth and improving mobile performance.

SEO with Structured Data

<LiteYouTubeEmbed
  id="VIDEO_ID"
  title="Video Title"
  seo={{
    name: "Full Video Title",
    description: "Video description for search engines",
    uploadDate: "2024-01-15T08:00:00Z",
    duration: "PT3M33S"
  }}
/>

Enables JSON-LD VideoObject structured data for Google Rich Results.

Player Events

<LiteYouTubeEmbed
  id="VIDEO_ID"
  title="Video Title"
  enableJsApi
  onPlay={() => console.log('Video started')}
  onPause={() => console.log('Video paused')}
  onEnd={() => console.log('Video finished')}
/>

React to player state changes for analytics, auto-advancing playlists, and more.

High Quality Thumbnails

<LiteYouTubeEmbed
  id="VIDEO_ID"
  title="Video Title"
  poster="maxresdefault"
/>

Use maxresdefault for hero sections and featured content.

Documentation

📚 Visit the full documentation →

• Getting Started
• API Reference - Complete props documentation
• Live Examples - Interactive demonstrations
• Code Examples - Copy-paste patterns
• Performance Guide
• Events Documentation

Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

# Install dependencies
npm install

# Run tests
npm test

# Build
npm run build

Security

This package includes:

• ✅ SLSA Build Level 3 Provenance - Cryptographically signed builds
• ✅ CodeQL Analysis - Automated security scanning
• ✅ Dependency Audits - Regular security updates

Verify package authenticity:

npm audit signatures

See .github/SLSA.md for more details.

License

MIT © Ibrahim Cesar

See LICENSE for full details.

Credits

• Paul Irish (@paulirish) - Original Lite YouTube Embed
• Addy Osmani (@addyosmani) - Adaptive Loading concepts

Resources

• 📚 Full Documentation
• 📦 npm Package
• 🐛 Report Issues
• 📝 Changelog