From a2c6aaa3c07b8e7449208f0a56d8d0169b657041 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 3 Nov 2025 12:40:37 -0600
Subject: [PATCH] fix(site): raise component demos above texture

---
 .../examples/react/FullscreenButton/FullscreenButtonDemo.tsx    | 2 +-
 site/src/examples/react/MuteButton/MuteButtonDemo.tsx           | 2 +-
 site/src/examples/react/PlayButton/PlayButtonDemo.tsx           | 2 +-
 site/src/examples/react/TimeSlider/TimeSliderDemo.tsx           | 2 +-
 site/src/examples/react/VolumeSlider/VolumeSliderDemo.tsx       | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

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}