From ef027d7d8984f7d71ea34baca2d4f0be4162d87a Mon Sep 17 00:00:00 2001
From: admin <contact@pichardo.io>
Date: Sat, 24 Jan 2026 19:08:18 -0800
Subject: [PATCH] fix: wrap Video component with forwardRef for direct element
 access

---
 src/components/Video.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/Video.tsx b/src/components/Video.tsx
index 610c300..3a2fba5 100644
--- a/src/components/Video.tsx
+++ b/src/components/Video.tsx
@@ -1,5 +1,5 @@
 import { buildSrc } from "@imagekit/javascript";
-import React, { useContext } from "react";
+import React, { forwardRef, useContext } from "react";
 import type { SrcProps } from "../interface";
 
 import { ImageKitContext } from "../provider/ImageKit";
@@ -21,8 +21,21 @@ export type IKVideoProps = Omit<JSX.IntrinsicElements["video"], "src"> & SrcProp
  *  transformation={[{ width: 500, height: 500 }]} // Add ImageKit transformations
  * />
  * ```
+ * 
+ * @example
+ * ```jsx
+ * // With ref for programmatic control
+ * const videoRef = useRef<HTMLVideoElement>(null);
+ * <Video
+ *  ref={videoRef}
+ *  urlEndpoint="https://ik.imagekit.io/your_imagekit_id"
+ *  src="/default-video.mp4"
+ *  muted
+ *  playsInline
+ * />
+ * ```
  */
-export const Video = (props: IKVideoProps) => {
+export const Video = forwardRef<HTMLVideoElement, IKVideoProps>((props, ref) => {
   const contextValues = useContext(ImageKitContext);
 
   // Its important to extract the ImageKit specific props from the props, so that we can use the rest of the props as is in the video element
@@ -48,6 +61,8 @@ export const Video = (props: IKVideoProps) => {
   });
 
   return (
-    <video {...nonIKParams} src={finalSrc} />
+    <video ref={ref} {...nonIKParams} src={finalSrc} />
   );
-};
+});
+
+Video.displayName = "Video";