diff --git a/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx b/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx
index 9706b618..07c51506 100644
--- a/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx
+++ b/site/src/examples/react/FullscreenButton/FullscreenButtonDemo.tsx
@@ -10,7 +10,7 @@ import { BasicFullscreenButton } from './BasicFullscreenButton';
 export function FullscreenButtonDemo() {
   return (
     <MediaProvider>
-      <MediaContainer style={{ position: 'relative' }}>
+      <MediaContainer style={{ position: 'relative', zIndex: 10 }}>
         <Video
           src={VJS8_DEMO_VIDEO.hls}
           poster={VJS8_DEMO_VIDEO.poster}
diff --git a/site/src/examples/react/MuteButton/MuteButtonDemo.tsx b/site/src/examples/react/MuteButton/MuteButtonDemo.tsx
index 921562e9..93cfbb2f 100644
--- a/site/src/examples/react/MuteButton/MuteButtonDemo.tsx
+++ b/site/src/examples/react/MuteButton/MuteButtonDemo.tsx
@@ -10,7 +10,7 @@ import { BasicMuteButton } from './BasicMuteButton';
 export function MuteButtonDemo() {
   return (
     <MediaProvider>
-      <MediaContainer style={{ position: 'relative' }}>
+      <MediaContainer style={{ position: 'relative', zIndex: 10 }}>
         <Video
           src={VJS8_DEMO_VIDEO.hls}
           poster={VJS8_DEMO_VIDEO.poster}
diff --git a/site/src/examples/react/PlayButton/PlayButtonDemo.tsx b/site/src/examples/react/PlayButton/PlayButtonDemo.tsx
index ef0d9e6e..3ffb0c19 100644
--- a/site/src/examples/react/PlayButton/PlayButtonDemo.tsx
+++ b/site/src/examples/react/PlayButton/PlayButtonDemo.tsx
@@ -10,7 +10,7 @@ import { BasicPlayButton } from './BasicPlayButton';
 export function PlayButtonDemo() {
   return (
     <MediaProvider>
-      <MediaContainer style={{ position: 'relative' }}>
+      <MediaContainer style={{ position: 'relative', zIndex: 10 }}>
         <Video
           src={VJS8_DEMO_VIDEO.hls}
           poster={VJS8_DEMO_VIDEO.poster}
diff --git a/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx b/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx
index 30fed387..aa651d69 100644
--- a/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx
+++ b/site/src/examples/react/TimeSlider/TimeSliderDemo.tsx
@@ -10,7 +10,7 @@ import { BasicTimeSlider } from './BasicTimeSlider';
 export function TimeSliderDemo() {
   return (
     <MediaProvider>
-      <MediaContainer style={{ position: 'relative' }}>
+      <MediaContainer style={{ position: 'relative', zIndex: 10 }}>
         <Video
           src={VJS8_DEMO_VIDEO.hls}
           poster={VJS8_DEMO_VIDEO.poster}
diff --git a/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx b/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx
index 17875bb0..57da1a48 100644
--- a/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx
+++ b/site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx
@@ -10,7 +10,7 @@ import { BasicVolumeSlider } from './BasicVolumeSlider';
 export function VolumeSliderDemo() {
   return (
     <MediaProvider>
-      <MediaContainer style={{ position: 'relative' }}>
+      <MediaContainer style={{ position: 'relative', zIndex: 10 }}>
         <Video
           src={VJS8_DEMO_VIDEO.hls}
           poster={VJS8_DEMO_VIDEO.poster}