more caching and error handling

components/Video/Video.module.css

@@ -1,14 +1,5 @@
 .player {
   margin: 0 auto;
-}
-
-.wrapper.responsive {
-  position: relative;
-  padding-top: 56.25%; /* ratio of 1280x720 */
-}
-
-.wrapper.responsive .player {
-  position: absolute;
-  top: 0;
-  left: 0;
+  width: 100%;
+  height: auto;
 }

components/Video/Video.tsx

@@ -7,43 +7,38 @@ export type VideoProps = Omit<Partial<ComponentPropsWithoutRef<"video">>, "src">
   src: string[];
   poster?: string;
   autoplay?: boolean;
-  responsive?: boolean;
 };
 
-const Video = ({ src, poster, autoplay = false, responsive = true, className, ...rest }: VideoProps) => {
+const Video = ({ src, poster, autoplay = false, className, ...rest }: VideoProps) => {
   return (
-    <div className={clsx(styles.wrapper, responsive && styles.responsive, className)}>
-      <video
-        width="100%"
-        height="100%"
-        className={styles.player}
-        poster={poster}
-        {...(autoplay
-          ? {
-              preload: "auto",
-              controls: false,
-              autoPlay: true,
-              playsInline: true, // safari autoplay workaround
-              loop: true,
-              muted: true,
-            }
-          : {
-              preload: "metadata",
-              controls: true,
-            })}
-        {...rest}
-      >
-        {src.map((file) => {
-          const extension = file.split(".").pop();
-
-          if (extension === "vtt") {
-            return <track key={file} kind="subtitles" src={file} srcLang="en" label="English" default />;
-          } else {
-            return <source key={file} src={file} type={`video/${extension}`} />;
+    <video
+      className={clsx(styles.player, className)}
+      poster={poster}
+      {...(autoplay
+        ? {
+            preload: "auto",
+            controls: false,
+            autoPlay: true,
+            playsInline: true, // safari autoplay workaround
+            loop: true,
+            muted: true,
           }
-        })}
-      </video>
-    </div>
+        : {
+            preload: "metadata",
+            controls: true,
+          })}
+      {...rest}
+    >
+      {src.map((file) => {
+        const extension = file.split(".").pop();
+
+        if (extension === "vtt") {
+          return <track key={file} kind="subtitles" src={file} srcLang="en" label="English" default />;
+        } else {
+          return <source key={file} src={file} type={`video/${extension}`} />;
+        }
+      })}
+    </video>
   );
 };