@codecademy/gamut

73.6.173.6.2-alpha.3e37cd.0
dist/Video/index.js
~dist/Video/index.jsModified
+9
Index: package/dist/Video/index.js
===================================================================
--- package/dist/Video/index.js
+++ package/dist/Video/index.js
@@ -20,8 +20,16 @@
     showPlayerEmbed = true
   } = props;
   const [loading, setLoading] = useState(true);
   const isMounted = useIsMounted();
+
+  /*
+   * VideoProps only widens its type for `data-*`/`aria-*` attributes, so
+   * filtering by key prefix picks up exactly (and only) those without also
+   * forwarding unrelated named props (textTracks, thumbnails, etc.) onto the
+   * DOM wrapper below.
+   */
+  const domAttrs = Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith('data-') || key.startsWith('aria-')));
   const config = {
     youtube: {
       playerVars: {
         color: 'white'
@@ -53,8 +61,9 @@
    * Remove ReactPlayer once Vidstack is validated.
    */
   if (isExternallyHostedVideo(videoUrl) && !hasTracksWithCaptionOrSubtitle && showPlayerEmbed) {
     return /*#__PURE__*/_jsx(Box, {
+      ...domAttrs,
       bg: loading ? 'black' : undefined,
       borderRadius: "md",
       className: className,
       overflow: "hidden",