react-lite-youtube-embed

React Lite YouTube Embed

Private, performant YouTube embeds for React. Under 5KB gzipped.

📚 Full Documentation & demos →

Complete guides, live examples, and API reference

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

⬆ Back to Top

Made with 🧩 in Brazil 🇧🇷