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

$3

``bash
npm install react-lite-youtube-embed
`

$3

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

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

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

---

Pro Tips

$3

`tsx
id="VIDEO_ID"
title="Video Title"
lazyLoad={true}
/>
`

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

$3

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

$3

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

$3

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

`bash


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:

`bash
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

---