[Feature] Add Lazy Loading Support for CldVideoPlayer

[Vaibhav91one]

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

<CldVideoPlayer
  src="my-video"
  width={1920}
  height={1080}
  loading="lazy"  // New prop (default: "eager")
/>

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

• I am willing to raise a PR for this feature
• I have read the Contributing Guidelines

[Vaibhav91one]

Hi @colbyfayock, Please let me know if this feature is valid to work on or not.

[devpatocld]

@eportis-cloudinary Please let me @Vaibhav91one if this feature is valid to work on or not

[Vaibhav91one]

Hi @eportis-cloudinary and @devpatocld. Any update on this? If feasible, I would like to do this under hacktoberfest period. If not feasbile right now, I can raise the PR later also.