fix: wrap Video component with forwardRef for direct element access

[gitpichardo]

This completes ref support across the SDK, complementing #17 which added ref types for Image.

The Video component wraps a native <video> element, so it requires explicit forwardRef to expose the underlying element.

Use case: Safari requires video.setAttribute('muted', '') on the DOM element for autoplay to work. This fix enables that pattern.

Usage:

const videoRef = useRef<HTMLVideoElement>(null);
<Video ref={videoRef} src="/video.mp4" muted playsInline />

Changes:

• Added forwardRef wrapper to Video component
• Added ref prop to underlying
• Added displayName for debugging
• Added JSDoc example for ref usage

[imagekitio]

In React 19, forwardRef is no longer necessary. Pass ref as a prop instead. https://react.dev/reference/react/forwardRef

Can you help me understand why passing ref directly is not working?

[gitpichardo]

Thank you, that makes sense. The build I was using was on React 18.

To give you context, I was building a scroll-triggered video component that needed to play/pause based on visibility:

const videoRef = useRef<HTMLVideoElement>(null);

useEffect(() => {
  if (inView) videoRef.current?.play();
  else videoRef.current?.pause();
}, [inView]);

<Video ref={videoRef} src="/video.mp4" muted playsInline />

The video never played because videoRef.current was always null.

Initially I thought it was due to an old Safari "muted attribute" bug. However, after testing on BrowserStack, I found that the bug has been fixed. The real problem was that refs weren't being forwarded.

If developers want programmatic control without forwardRef in React 18, they are left with two workarounds:

• buildSrc + native <video>
• querySelector

[imagekitio]

Thanks for the PR. Released 2.1.4