diff --git a/docs/docs-components/SandpackExample.js b/docs/docs-components/SandpackExample.js
index df6fac1d10..382692eb29 100644
--- a/docs/docs-components/SandpackExample.js
+++ b/docs/docs-components/SandpackExample.js
@@ -243,11 +243,14 @@ export default function SandpackExample({
           import { Box, ColorSchemeProvider } from 'gestalt';
           import App from "./App";
 
+          const html = document.querySelector('html');
+          html.setAttribute('dir', '${exampleTextDirection}');
+
           const root = createRoot(document.getElementById("root"));
           root.render(
             <StrictMode>
               <ColorSchemeProvider colorScheme="${exampleColorScheme}" fullDimensions>
-                <Box color="default" height="100%" width="100%" dir="${exampleTextDirection}">
+                <Box color="default" height="100%" width="100%">
                   <App />
                 </Box>
               </ColorSchemeProvider>
diff --git a/docs/examples/video/autoplayAndErrorDetectionExample.js b/docs/examples/video/autoplayAndErrorDetectionExample.js
index 1c86c8ef10..7fab73cce6 100644
--- a/docs/examples/video/autoplayAndErrorDetectionExample.js
+++ b/docs/examples/video/autoplayAndErrorDetectionExample.js
@@ -4,6 +4,7 @@ import { Box, Video } from 'gestalt';
 
 export default function Example(): Node {
   const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
 
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
@@ -17,7 +18,9 @@ export default function Example(): Node {
           onControlsPlay={() => setPlaying(true)}
           onControlsPause={() => setPlaying(false)}
           onEnded={() => setPlaying(false)}
+          onVolumeChange={(e) => setVolume(e.volume)}
           playing={playing}
+          volume={volume}
           loop
           src="https://v.pinimg.com/videos/mc/expMp4/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4_t1.mp4"
         />
diff --git a/docs/examples/video/captionsExample.js b/docs/examples/video/captionsExample.js
index 7670717208..660b77b568 100644
--- a/docs/examples/video/captionsExample.js
+++ b/docs/examples/video/captionsExample.js
@@ -4,6 +4,7 @@ import { Box, Video } from 'gestalt';
 
 export default function Example(): Node {
   const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
 
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
@@ -12,12 +13,14 @@ export default function Example(): Node {
           aspectRatio={1024 / 435}
           captions="https://iandevlin.github.io/mdn/video-player-with-captions/subtitles/vtt/sintel-en.vtt"
           controls
-          onPlayError={({ error }) => error && setPlaying(false)}
+          playing={playing}
+          volume={volume}
           onPlay={() => setPlaying(true)}
+          onPlayError={({ error }) => error && setPlaying(false)}
           onControlsPlay={() => setPlaying(true)}
           onControlsPause={() => setPlaying(false)}
           onEnded={() => setPlaying(false)}
-          playing={playing}
+          onVolumeChange={(e) => setVolume(e.volume)}
           loop
           src="https://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4"
         />
diff --git a/docs/examples/video/controlsExample.js b/docs/examples/video/controlsExample.js
index 34694ecd44..cfc441f0cf 100644
--- a/docs/examples/video/controlsExample.js
+++ b/docs/examples/video/controlsExample.js
@@ -4,6 +4,8 @@ import { Box, Flex, IconButton, Label, Switch, Text, Video } from 'gestalt';
 
 export default function Example(): Node {
   const [showControls, setShowControls] = useState(false);
+  const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
 
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
@@ -24,8 +26,14 @@ export default function Example(): Node {
           <Video
             aspectRatio={540 / 960}
             controls={showControls}
-            onPlayError={() => {}}
-            onPlay={() => {}}
+            playing={playing}
+            volume={volume}
+            onPlay={() => setPlaying(true)}
+            onPlayError={({ error }) => error && setPlaying(false)}
+            onControlsPlay={() => setPlaying(true)}
+            onControlsPause={() => setPlaying(false)}
+            onEnded={() => setPlaying(false)}
+            onVolumeChange={(e) => setVolume(e.volume)}
             poster="https://i.pinimg.com/videos/thumbnails/originals/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4.0000000.jpg"
             src="https://v.pinimg.com/videos/mc/expMp4/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4_t1.mp4"
           >
diff --git a/docs/examples/video/mainExample.js b/docs/examples/video/mainExample.js
index 06d43457c5..36e2430726 100644
--- a/docs/examples/video/mainExample.js
+++ b/docs/examples/video/mainExample.js
@@ -1,16 +1,25 @@
 // @flow strict
-import { type Node } from 'react';
+import { type Node, useState } from 'react';
 import { Box, Video } from 'gestalt';
 
 export default function Example(): Node {
+  const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
+
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
       <Box width={300}>
         <Video
           aspectRatio={540 / 960}
           controls
-          onPlayError={() => {}}
-          onPlay={() => {}}
+          playing={playing}
+          volume={volume}
+          onPlay={() => setPlaying(true)}
+          onPlayError={({ error }) => error && setPlaying(false)}
+          onControlsPlay={() => setPlaying(true)}
+          onControlsPause={() => setPlaying(false)}
+          onEnded={() => setPlaying(false)}
+          onVolumeChange={(e) => setVolume(e.volume)}
           src="https://v.pinimg.com/videos/mc/expMp4/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4_t1.mp4"
         />
       </Box>
diff --git a/docs/examples/video/multipleSourcesExample.js b/docs/examples/video/multipleSourcesExample.js
index a16b88004d..3f13c94b97 100644
--- a/docs/examples/video/multipleSourcesExample.js
+++ b/docs/examples/video/multipleSourcesExample.js
@@ -4,6 +4,7 @@ import { Box, Video } from 'gestalt';
 
 export default function Example(): Node {
   const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
 
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
@@ -12,9 +13,13 @@ export default function Example(): Node {
           aspectRatio={426 / 240}
           controls
           playing={playing}
-          onPlay={() => {}}
-          onPlayError={() => {}}
+          volume={volume}
+          onPlay={() => setPlaying(true)}
+          onPlayError={({ error }) => error && setPlaying(false)}
           onControlsPlay={() => setPlaying(true)}
+          onControlsPause={() => setPlaying(false)}
+          onEnded={() => setPlaying(false)}
+          onVolumeChange={(e) => setVolume(e.volume)}
           src={[
             {
               type: 'video/mp4',
diff --git a/docs/examples/video/updatesExample.js b/docs/examples/video/updatesExample.js
index 41bbd872c2..a63f3ff201 100644
--- a/docs/examples/video/updatesExample.js
+++ b/docs/examples/video/updatesExample.js
@@ -46,8 +46,8 @@ export default function Example(): Node {
             onControlsPlay={() => setPlaying(true)}
             onControlsPause={() => setPlaying(false)}
             onVolumeChange={(e) => setVolume(e.volume)}
-            onPlay={() => {}}
-            onPlayError={() => {}}
+            onPlay={() => setPlaying(true)}
+            onPlayError={({ error }) => error && setPlaying(false)}
             playbackRate={playbackRate}
             playing={playing}
             src={src}
diff --git a/docs/examples/video/withChildrenExample.js b/docs/examples/video/withChildrenExample.js
index efdcbb1179..93cbdb90f6 100644
--- a/docs/examples/video/withChildrenExample.js
+++ b/docs/examples/video/withChildrenExample.js
@@ -1,8 +1,11 @@
 // @flow strict
-import { type Node } from 'react';
+import { type Node, useState } from 'react';
 import { Box, IconButton, Video } from 'gestalt';
 
 export default function Example(): Node {
+  const [playing, setPlaying] = useState(false);
+  const [volume, setVolume] = useState(1);
+
   return (
     <Box padding={8} height="100%" display="flex" alignItems="center" justifyContent="center">
       <Box width={300}>
@@ -10,8 +13,14 @@ export default function Example(): Node {
           aspectRatio={540 / 960}
           controls
           src="https://v.pinimg.com/videos/mc/expMp4/c8/37/71/c83771d856bc1ee12e2d2f81083df9d4_t1.mp4"
-          onPlay={() => {}}
-          onPlayError={() => {}}
+          playing={playing}
+          volume={volume}
+          onPlay={() => setPlaying(true)}
+          onPlayError={({ error }) => error && setPlaying(false)}
+          onControlsPlay={() => setPlaying(true)}
+          onControlsPause={() => setPlaying(false)}
+          onEnded={() => setPlaying(false)}
+          onVolumeChange={(e) => setVolume(e.volume)}
         >
           <Box
             width="100%"
diff --git a/packages/gestalt/src/Video/Playhead.js b/packages/gestalt/src/Video/Playhead.js
index f597ada234..c180b5c498 100644
--- a/packages/gestalt/src/Video/Playhead.js
+++ b/packages/gestalt/src/Video/Playhead.js
@@ -30,9 +30,16 @@ export default class VideoPlayhead extends PureComponent<Props, State> {
   seek: (clientX: number) => void = (clientX) => {
     if (this.playhead) {
       const { duration, seek } = this.props;
-      const { left, width } = this.playhead.getBoundingClientRect();
-      const percent = Math.max(0, Math.min((clientX - left) / width, 1));
+      const { left, right, width } = this.playhead.getBoundingClientRect();
+
+      // As a convention, text direction is defined in `dir` attribute of `html` tag of the document.
+      // The following check is done under the assuption of that convention.
+      const isRTL = document.querySelector('html')?.getAttribute('dir') === 'rtl';
+      const difference = isRTL ? right - clientX : clientX - left;
+
+      const percent = Math.max(0, Math.min(difference / width, 1));
       const newTime = percent * duration;
+
       seek(newTime);
     }
   };
@@ -75,8 +82,9 @@ export default class VideoPlayhead extends PureComponent<Props, State> {
   render(): Node {
     const { accessibilityProgressBarLabel, currentTime, duration } = this.props;
     const width = `${Math.floor((currentTime * 10000) / duration) / 100}%`;
+
     return (
-      <Box position="relative" display="flex" flex="grow" alignItems="center" height={16}>
+      <Box position="relative" height={16}>
         <div
           aria-label={accessibilityProgressBarLabel}
           aria-valuemax={duration}
@@ -93,15 +101,16 @@ export default class VideoPlayhead extends PureComponent<Props, State> {
           role="progressbar"
           tabIndex="-1"
         >
-          <Box left right position="absolute" color="secondary" rounding={2} height={4}>
-            <Box color="light" rounding={2} height="100%" width={width} />
-          </Box>
           <Box
+            left
+            right
             position="absolute"
             rounding={2}
             height={4}
-            dangerouslySetInlineStyle={{ __style: { left: width } }}
+            color="secondary"
+            display="flex"
           >
+            <Box color="light" rounding={2} height="100%" width={width} />
             <Box
               rounding="circle"
               width={16}
diff --git a/packages/gestalt/src/Video/__snapshots__/Controls.test.js.snap b/packages/gestalt/src/Video/__snapshots__/Controls.test.js.snap
index 8d4d37844b..2ec2b119be 100644
--- a/packages/gestalt/src/Video/__snapshots__/Controls.test.js.snap
+++ b/packages/gestalt/src/Video/__snapshots__/Controls.test.js.snap
@@ -59,7 +59,7 @@ exports[`VideoControls for double digit minutes 1`] = `
     className="box flexGrow paddingX2 paddingY2"
   >
     <div
-      className="box flexGrow relative xsDisplayFlex xsItemsCenter"
+      className="box relative"
       style={
         Object {
           "height": 16,
@@ -82,7 +82,7 @@ exports[`VideoControls for double digit minutes 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -98,16 +98,6 @@ exports[`VideoControls for double digit minutes 1`] = `
               }
             }
           />
-        </div>
-        <div
-          className="absolute box rounding2"
-          style={
-            Object {
-              "height": 4,
-              "left": "100%",
-            }
-          }
-        >
           <div
             className="box circle light marginStartN2"
             style={
@@ -235,7 +225,7 @@ exports[`VideoControls for double digit seconds 1`] = `
     className="box flexGrow paddingX2 paddingY2"
   >
     <div
-      className="box flexGrow relative xsDisplayFlex xsItemsCenter"
+      className="box relative"
       style={
         Object {
           "height": 16,
@@ -258,7 +248,7 @@ exports[`VideoControls for double digit seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -274,16 +264,6 @@ exports[`VideoControls for double digit seconds 1`] = `
               }
             }
           />
-        </div>
-        <div
-          className="absolute box rounding2"
-          style={
-            Object {
-              "height": 4,
-              "left": "100%",
-            }
-          }
-        >
           <div
             className="box circle light marginStartN2"
             style={
@@ -411,7 +391,7 @@ exports[`VideoControls for single digit minutes 1`] = `
     className="box flexGrow paddingX2 paddingY2"
   >
     <div
-      className="box flexGrow relative xsDisplayFlex xsItemsCenter"
+      className="box relative"
       style={
         Object {
           "height": 16,
@@ -434,7 +414,7 @@ exports[`VideoControls for single digit minutes 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -450,16 +430,6 @@ exports[`VideoControls for single digit minutes 1`] = `
               }
             }
           />
-        </div>
-        <div
-          className="absolute box rounding2"
-          style={
-            Object {
-              "height": 4,
-              "left": "100%",
-            }
-          }
-        >
           <div
             className="box circle light marginStartN2"
             style={
@@ -587,7 +557,7 @@ exports[`VideoControls for single digit seconds 1`] = `
     className="box flexGrow paddingX2 paddingY2"
   >
     <div
-      className="box flexGrow relative xsDisplayFlex xsItemsCenter"
+      className="box relative"
       style={
         Object {
           "height": 16,
@@ -610,7 +580,7 @@ exports[`VideoControls for single digit seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -626,16 +596,6 @@ exports[`VideoControls for single digit seconds 1`] = `
               }
             }
           />
-        </div>
-        <div
-          className="absolute box rounding2"
-          style={
-            Object {
-              "height": 4,
-              "left": "100%",
-            }
-          }
-        >
           <div
             className="box circle light marginStartN2"
             style={
@@ -763,7 +723,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
     className="box flexGrow paddingX2 paddingY2"
   >
     <div
-      className="box flexGrow relative xsDisplayFlex xsItemsCenter"
+      className="box relative"
       style={
         Object {
           "height": 16,
@@ -786,7 +746,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding2 secondary"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -802,16 +762,6 @@ exports[`VideoControls rounds for partial seconds 1`] = `
               }
             }
           />
-        </div>
-        <div
-          className="absolute box rounding2"
-          style={
-            Object {
-              "height": 4,
-              "left": "100%",
-            }
-          }
-        >
           <div
             className="box circle light marginStartN2"
             style={
diff --git a/packages/gestalt/src/Video/__snapshots__/Playhead.test.js.snap b/packages/gestalt/src/Video/__snapshots__/Playhead.test.js.snap
index 9516792fc4..ff082bd543 100644
--- a/packages/gestalt/src/Video/__snapshots__/Playhead.test.js.snap
+++ b/packages/gestalt/src/Video/__snapshots__/Playhead.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`VideoPlayhead 1`] = `
 <div
-  className="box flexGrow relative xsDisplayFlex xsItemsCenter"
+  className="box relative"
   style={
     Object {
       "height": 16,
@@ -25,7 +25,7 @@ exports[`VideoPlayhead 1`] = `
     tabIndex="-1"
   >
     <div
-      className="absolute box left0 right0 rounding2 secondary"
+      className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
       style={
         Object {
           "height": 4,
@@ -41,16 +41,6 @@ exports[`VideoPlayhead 1`] = `
           }
         }
       />
-    </div>
-    <div
-      className="absolute box rounding2"
-      style={
-        Object {
-          "height": 4,
-          "left": "50%",
-        }
-      }
-    >
       <div
         className="box circle light marginStartN2"
         style={
diff --git a/packages/gestalt/src/__snapshots__/Video.test.js.snap b/packages/gestalt/src/__snapshots__/Video.test.js.snap
index 79da576f4f..10169605e3 100644
--- a/packages/gestalt/src/__snapshots__/Video.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Video.test.js.snap
@@ -188,7 +188,7 @@ exports[`Video with children 1`] = `
       className="box flexGrow paddingX2 paddingY2"
     >
       <div
-        className="box flexGrow relative xsDisplayFlex xsItemsCenter"
+        className="box relative"
         style={
           Object {
             "height": 16,
@@ -211,7 +211,7 @@ exports[`Video with children 1`] = `
           tabIndex="-1"
         >
           <div
-            className="absolute box left0 right0 rounding2 secondary"
+            className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
             style={
               Object {
                 "height": 4,
@@ -227,16 +227,6 @@ exports[`Video with children 1`] = `
                 }
               }
             />
-          </div>
-          <div
-            className="absolute box rounding2"
-            style={
-              Object {
-                "height": 4,
-                "left": "NaN%",
-              }
-            }
-          >
             <div
               className="box circle light marginStartN2"
               style={