@codecademy/gamut

Index: package/dist/Video/index.js
===================================================================
--- package/dist/Video/index.js
+++ package/dist/Video/index.js
@@ -2,11 +2,10 @@
 // If they can't be resolved, install them: yarn add @vidstack/react react-player
 
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { Box } from '../Box';
 import { useIsMounted } from '../utils';
-import { OverlayPlayButton, ReactVideoPlayer } from './lib/ReactPlayer';
+import { OverlayPlayButton, ReactVideoPlayer, VideoFrame } from './lib/ReactPlayer';
 import { VidstackPlayer } from './lib/VidstackPlayer';
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const DEFAULT_VIDEO_TITLE = 'Video player';
 export const Video = props => {
@@ -94,15 +93,14 @@
    * @TODO [https://skillsoftdev.atlassian.net/browse/GM-998]
    * Remove ReactPlayer once Vidstack is validated.
    */
   if (isExternallyHostedVideo(videoUrl) && !hasTracksWithCaptionOrSubtitle && showPlayerEmbed) {
-    return /*#__PURE__*/_jsx(Box, {
+    return /*#__PURE__*/_jsx(VideoFrame, {
       bg: loading ? 'black' : undefined,
       borderRadius: "md",
       className: className,
       overflow: "hidden",
       position: "relative",
-      pt: '56.25%',
       ref: playerWrapperRef,
       width: "100%",
       children: isMounted ? /*#__PURE__*/_jsx(ReactVideoPlayer, {
         config: config,
@@ -116,9 +114,13 @@
         }),
         playing: autoplay,
         src: videoUrl,
         title: videoTitle,
-        width: "100%",
+        width: "100%"
+        // Without a wrapper, react-player v3 drops `className` and the
+        // 100% size from its splash, so it no longer fills the frame.
+        ,
+        wrapper: "div",
         onPlay: onPlay,
         onReady: () => {
           labelProviderIframe();
           onReady?.();