cloudinary-community / cloudinary-community/next-cloudinary
[Feature] Add Lazy Loading Support for CldVideoPlayer
- Dominant language
- JavaScript
- Stars
- 300
- Forks
- 137
- Avg merge
- 3m
- Merged PRs (30d)
- 2
Description
`CldVideoPlayer` loads scripts immediately on mount, impacting performance for videos below the fold. , video player has no lazy loading support.
### Solution
Add `loading="lazy"` prop using Intersection Observer to defer script loading until video enters viewport.
### Usage
```tsx
```
### Acceptance Criteria
- [ ] Add `loading` prop: `"eager"` (default) | `"lazy"`
- [ ] Use Intersection Observer for viewport detection
- [ ] Show placeholder/poster while lazy loading
- [ ] No breaking changes (backward compatible)
- [ ] Add tests for lazy loading behavior
- [ ] Update TypeScript types and documentation
### Benefits
~50-200KB savings per lazy-loaded player + improved LCP/TBT
### Checklist
- [x] **I am willing to raise a PR for this feature**
- [x] I have read the Contributing Guidelines
Contributor guide
Assessment
This issue has not been assessed yet.