YouTube First-Class Support
Unified React Media API for Google Drive and YouTube.
Overview
DriveLoader offers first-class YouTube embedding through <YouTubeVideo /> or <DriveMedia />. It uses the privacy-enhanced YouTube player by default, includes thumbnail-first lazy loading, and operates securely without requiring a YouTube API key.
Code Example
youtube.tsx
| 1 | import { DriveMedia, YouTubeVideo } from '@driveloader/react'; |
| 2 | |
| 3 | // Universal routing |
| 4 | <DriveMedia src="https://youtu.be/dQw4w9WgXcQ" /> |
| 5 | |
| 6 | // Direct component |
| 7 | <YouTubeVideo |
| 8 | src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" |
| 9 | lazyThumbnail={true} |
| 10 | controls |
| 11 | /> |
Best Practices
- •Use lazyThumbnail={true} to display a fast-loading poster image instead of the full iframe until the user interacts.
- •Use <DriveMedia /> when handling user-provided URLs that could be either Google Drive or YouTube links.
Common Mistakes
- ×Attempting to read YouTube metrics (views, likes) which requires the official YouTube Data API.
- ×Assuming autoplay works on mobile without the 'muted' prop.
Performance Notes
Zero-dependency local parsing (no network probes). Generates exact embed and thumbnail URLs instantly.