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

npm install react-lite-youtube-embed

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.

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

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

<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.

<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.

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

Use maxresdefault for hero sections and featured content.

📚 Visit the full documentation →

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

We welcome contributions! See CONTRIBUTING.md for guidelines.

# Install dependencies npm install # Run tests npm test # Build npm run build

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.

MIT © Ibrahim Cesar

See LICENSE for full details.

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

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