diff --git a/apps/storybook/modules.d.ts b/apps/storybook/modules.d.ts
index 0c37acaf..2ae89e97 100644
--- a/apps/storybook/modules.d.ts
+++ b/apps/storybook/modules.d.ts
@@ -8,6 +8,11 @@ declare module "*.mp3" {
   export default value;
 }
 
+declare module "*.mp4" {
+  const value: string;
+  export default value;
+}
+
 declare module "*.jpg" {
   const value: string;
   export default value;
diff --git a/apps/storybook/stories/react-media/MediaProvider.stories.tsx b/apps/storybook/stories/react-media/MediaProvider.stories.tsx
index fb93b16f..32674cd7 100644
--- a/apps/storybook/stories/react-media/MediaProvider.stories.tsx
+++ b/apps/storybook/stories/react-media/MediaProvider.stories.tsx
@@ -35,7 +35,7 @@ import {
   timecode,
 } from "@codedazur/react-components";
 import { Meta, StoryObj } from "@storybook/react";
-import { FunctionComponent, useMemo } from "react";
+import { FunctionComponent, useMemo, useRef } from "react";
 import { Bar } from "@apps/storybook/components/Bar";
 import { List } from "@apps/storybook/components/List";
 import { WithCenter } from "@apps/storybook/decorators/WithCenter";
@@ -46,6 +46,9 @@ import seaOfStars from "./artworks/sea-of-stars.jpg";
 import alienated from "./tracks/alienated.mp3";
 import meteorites from "./tracks/meteorites.mp3";
 import tabulaRasa from "./tracks/tabula-rasa.mp3";
+import bigBuckBunny from "./videos/big-buck-bunny.mp4";
+import ships from "./videos/ships.mp4";
+import guitar from "./videos/guitar.mp4";
 import { DebugOverlay } from "../../components/DebugOverlay";
 
 const meta: Meta = {
@@ -112,6 +115,40 @@ export const WithVolumeControls = () => (
   </MediaProvider>
 );
 
+export const Video = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  return (
+    <MediaProvider tracks={[bigBuckBunny]} element={videoRef}>
+      <Stack justify={"center"} align={"center"}>
+        <video
+          style={{ height: "15rem", width: "25rem" }}
+          controls
+          ref={videoRef}
+        />
+      </Stack>
+
+      <MediaDebugOverlay tracks cursor isPlaying volume time duration />
+    </MediaProvider>
+  );
+};
+export const MultipleVideos = () => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  return (
+    <MediaProvider tracks={[bigBuckBunny, ships, guitar]} element={videoRef}>
+      <Stack justify={"center"} align={"center"}>
+        <video
+          style={{ height: "15rem", width: "25rem" }}
+          controls
+          ref={videoRef}
+        />
+      </Stack>
+      <TrackList />
+      <PlaylistControls />
+      <MediaDebugOverlay tracks cursor isPlaying volume time duration />
+    </MediaProvider>
+  );
+};
+
 const VolumeControls = () => (
   <Bar>
     <VolumeUpIcon />
@@ -472,6 +509,11 @@ const attributions = {
     "https://soundcloud.com/purrplecat/tabula-rasa",
     "Licensed under CC BY-SA 3.0",
   ],
+  [ships]: ["Stock video by Videezy", "http://videezy.com/"],
+  [guitar]: [
+    "Video by Nino Souza",
+    "https://www.pexels.com/video/rock-audio-pedal-banda-4142301/",
+  ],
 };
 
 const TrackAttributionOverlay = () => {
@@ -488,7 +530,7 @@ const TrackAttributionOverlay = () => {
       <AbsorbPointer>
         <Opacity opacity={0.5}>
           <Column style={{ fontSize: "smaller", lineHeight: "1.5em" }}>
-            {attributions[source].map((line) => (
+            {attributions[source]?.map((line) => (
               <Text key={line}>{line}</Text>
             ))}
           </Column>
@@ -527,7 +569,7 @@ const MediaDebugOverlay: FunctionComponent<MediaDebugOverlayProps> = ({
         .map(([key]) => key) as Array<
         keyof ReturnType<typeof useMediaProgress>
       >,
-    [keyObject]
+    [keyObject],
   );
 
   return <DebugOverlay value={pick(media, keys)} />;
diff --git a/apps/storybook/stories/react-media/videos/big-buck-bunny.mp4 b/apps/storybook/stories/react-media/videos/big-buck-bunny.mp4
new file mode 100644
index 00000000..d4f53640
Binary files /dev/null and b/apps/storybook/stories/react-media/videos/big-buck-bunny.mp4 differ
diff --git a/apps/storybook/stories/react-media/videos/guitar.mp4 b/apps/storybook/stories/react-media/videos/guitar.mp4
new file mode 100644
index 00000000..6d9c7750
Binary files /dev/null and b/apps/storybook/stories/react-media/videos/guitar.mp4 differ
diff --git a/apps/storybook/stories/react-media/videos/ships.mp4 b/apps/storybook/stories/react-media/videos/ships.mp4
new file mode 100644
index 00000000..e3677caf
Binary files /dev/null and b/apps/storybook/stories/react-media/videos/ships.mp4 differ
diff --git a/packages/react-media/hooks/useMedia.ts b/packages/react-media/hooks/useMedia.ts
index 168d3002..323e0a71 100644
--- a/packages/react-media/hooks/useMedia.ts
+++ b/packages/react-media/hooks/useMedia.ts
@@ -1,8 +1,5 @@
 import { useContext } from "react";
-import {
-  mediaContext,
-  MediaContext,
-} from "../providers/MediaContext";
+import { mediaContext, MediaContext } from "../providers/MediaContext";
 import { MediaTrack } from "../providers/MediaProvider";
 
 export const useMedia = <T extends MediaTrack>(): MediaContext<T> =>
diff --git a/packages/react-media/providers/MediaProvider.tsx b/packages/react-media/providers/MediaProvider.tsx
index 8634b7ca..01c0e216 100644
--- a/packages/react-media/providers/MediaProvider.tsx
+++ b/packages/react-media/providers/MediaProvider.tsx
@@ -18,7 +18,6 @@ import { MediaContext, mediaContext } from "./MediaContext";
 
 export type MediaTrack = string | { source: string };
 
-
 interface MediaProviderProps {
   element?: MaybeRef<HTMLMediaElement>;
   tracks?: MediaTrack[];
@@ -51,11 +50,12 @@ export function MediaProvider({
   );
   const trackRef = useSynchronizedRef(track);
 
-  const elementRef: MaybeRef<HTMLMediaElement> =  useRef(
+  const internalElementRef: MaybeRef<HTMLMediaElement> = useRef(
     typeof window !== "undefined"
       ? window.document.createElement("video")
       : null,
   );
+  const elementRef = initialElement ?? internalElementRef;
 
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const isPlayingRef = useSynchronizedRef(isPlaying);