cloudinary-community / cloudinary-community/next-cloudinary

[Feature] Add Lazy Loading Support for CldVideoPlayer

Open
#620 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.