diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx
index 519f06c361a..2f6cbbd1958 100644
--- a/packages/gamut/src/Video/index.tsx
+++ b/packages/gamut/src/Video/index.tsx
@@ -1,22 +1,54 @@
 import { PlayIcon } from '@codecademy/gamut-icons';
-import cx from 'classnames';
+import { theme } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import { useState } from 'react';
 import * as React from 'react';
 import ReactPlayer from 'react-player';
 
+import { Box, FlexBox } from '../Box';
 import { useIsMounted } from '../utils';
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles/index.module.scss';
+
+const ReactVideoPlayer = styled(ReactPlayer)`
+  width: 100% !important;
+  height: 100% !important;
+  border: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  & :focus-visible {
+    outline-offset: 3px;
+  }
+  video::-webkit-media-controls-panel {
+    background-image: linear-gradient(
+      transparent 15%,
+      ${theme.colors['navy-900']} 55%
+    );
+  }
+`;
 
 const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => {
   return (
-    <div
-      className={styles.overlay}
+    <FlexBox
       role="button"
       aria-label={`play video${videoTitle ? `: ${videoTitle}` : ''}`}
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      position="relative"
+      color="white"
+      width="100%"
+      height="100%"
+      opacity="0.5"
     >
-      <PlayIcon className={styles.hoverButton} />
-    </div>
+      <PlayIcon
+        width="15%"
+        height="26.7%"
+        minWidth="75px"
+        minHeight="75px"
+        color="white"
+      />
+    </FlexBox>
   );
 };
 
@@ -43,7 +75,6 @@ export type VideoProps = {
 
 export const Video: React.FC<VideoProps> = ({
   autoplay,
-  className,
   controls,
   height,
   loop,
@@ -68,12 +99,16 @@ export const Video: React.FC<VideoProps> = ({
   };
 
   return (
-    <div
-      className={cx(styles.videoWrapper, loading && styles.loading, className)}
+    <Box
+      position="relative"
+      width="100%"
+      pt={'56.25%' as any}
+      borderRadius="md"
+      overflow="hidden"
+      bg={loading ? 'black' : undefined}
     >
       {isMounted ? (
-        <ReactPlayer
-          className={styles.iframe}
+        <ReactVideoPlayer
           config={config}
           controls={controls === undefined ? true : controls}
           height={height}
@@ -92,6 +127,6 @@ export const Video: React.FC<VideoProps> = ({
           onPlay={onPlay}
         />
       ) : null}
-    </div>
+    </Box>
   );
 };
diff --git a/packages/gamut/src/Video/styles/index.module.scss b/packages/gamut/src/Video/styles/index.module.scss
deleted file mode 100644
index 898fbb39368..00000000000
--- a/packages/gamut/src/Video/styles/index.module.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import "~@codecademy/gamut-styles/utils";
-
-.videoWrapper {
-  position: relative;
-  width: 100%;
-  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
-  border-radius: 4px;
-  overflow: hidden;
-  &.loading {
-    background-color: $color-blue-1100;
-  }
-}
-
-.overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  width: 100%;
-  height: 100%;
-  color: $color-white;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-}
-
-.iframe {
-  width: 100% !important;
-  height: 100% !important;
-  border: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  & :focus-visible {
-    outline-offset: 3px;
-  }
-}
-
-.hoverButton {
-  width: 15%;
-  height: 26.7%;
-  min-width: px-rem(75px);
-  min-height: px-rem(75px);
-  color: $color-white;
-}