diff --git a/.changeset/fix_video_player.md b/.changeset/fix_video_player.md
new file mode 100644
index 0000000000..c18993dfe8
--- /dev/null
+++ b/.changeset/fix_video_player.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix video player sometimes not working
diff --git a/src/app/components/DeviceVerification.tsx b/src/app/components/DeviceVerification.tsx
index cbe8fbe5a6..4979c54e7a 100644
--- a/src/app/components/DeviceVerification.tsx
+++ b/src/app/components/DeviceVerification.tsx
@@ -38,7 +38,7 @@ type WaitingMessageProps = {
 function WaitingMessage({ message }: WaitingMessageProps) {
   return (
     <Box alignItems="Center" gap="200">
-      <Spinner variant="Secondary" size="200" />
+      <Spinner variant="Secondary" size="200" style={{ backgroundColor: 'transparent' }} />
       <Text size="T300">{message}</Text>
     </Box>
   );
diff --git a/src/app/components/media/media.css.ts b/src/app/components/media/media.css.ts
index a176fef027..a38d5e191c 100644
--- a/src/app/components/media/media.css.ts
+++ b/src/app/components/media/media.css.ts
@@ -17,6 +17,7 @@ export const ImagePixelated = style({
 export const Video = style([
   DefaultReset,
   {
+    position: 'relative',
     objectFit: 'contain',
     width: '100%',
     height: '100%',
diff --git a/src/app/components/message/modals/MessageDelete.tsx b/src/app/components/message/modals/MessageDelete.tsx
index 66059f73fd..cda942786b 100644
--- a/src/app/components/message/modals/MessageDelete.tsx
+++ b/src/app/components/message/modals/MessageDelete.tsx
@@ -155,7 +155,7 @@ export function MessageDeleteInternal({ room, mEvent, onClose }: MessageDeleteIn
           variant="Critical"
           before={
             deleteState.status === AsyncStatus.Loading ? (
-              <Spinner fill="Solid" variant="Critical" size="200" />
+              <Spinner variant="Secondary" size="200" style={{ backgroundColor: 'transparent' }} />
             ) : undefined
           }
           aria-disabled={deleteState.status === AsyncStatus.Loading}
diff --git a/src/app/components/message/modals/MessageReport.tsx b/src/app/components/message/modals/MessageReport.tsx
index d2248638e4..8a6e508431 100644
--- a/src/app/components/message/modals/MessageReport.tsx
+++ b/src/app/components/message/modals/MessageReport.tsx
@@ -156,7 +156,7 @@ export function MessageReportInternal({ room, mEvent, onClose }: MessageReportIn
           variant="Critical"
           before={
             reportState.status === AsyncStatus.Loading ? (
-              <Spinner fill="Solid" variant="Critical" size="200" />
+              <Spinner variant="Secondary" size="200" style={{ backgroundColor: 'transparent' }} />
             ) : undefined
           }
           aria-disabled={
diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index 74f6987349..82abef0a17 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -324,7 +324,16 @@ export const RoomCard = as<'div', RoomCardProps>(
                 variant="Secondary"
                 size="300"
                 disabled={joining}
-                before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
+                before={
+                  joining && (
+                    <Spinner
+                      size="50"
+                      variant="Secondary"
+                      fill="Soft"
+                      style={{ background: 'transparent' }}
+                    />
+                  )
+                }
               >
                 <Text size="B300" truncate>
                   {joining ? 'Joining' : 'Join'}
diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
index fdd09c927e..6b24f203b5 100644
--- a/src/app/components/room-intro/RoomIntro.tsx
+++ b/src/app/components/room-intro/RoomIntro.tsx
@@ -158,7 +158,12 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
                 disabled={prevRoomState.status === AsyncStatus.Loading}
                 after={
                   prevRoomState.status === AsyncStatus.Loading ? (
-                    <Spinner size="50" variant="Secondary" fill="Soft" />
+                    <Spinner
+                      size="50"
+                      variant="Secondary"
+                      fill="Soft"
+                      style={{ background: 'transparent' }}
+                    />
                   ) : undefined
                 }
               >
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 82a9a094b6..43768ca411 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -1814,6 +1814,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                         variant="SurfaceVariant"
                         size="300"
                         radii="300"
+                        style={{ backgroundColor: 'transparent' }}
                       >
                         {composerIcon(GifIcon, {
                           weight: emojiBoardTab === EmojiBoardTab.Gif ? 'fill' : 'regular',
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index d73ed97450..45e00bc875 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -1001,13 +1001,13 @@ export function RoomTimeline({
 
       {showBackPaginationSpinner && (
         <TimelineFloat position="Top" style={timelineTopFloatLift}>
-          <Spinner variant="Secondary" size="400" />
+          <Spinner variant="Secondary" size="400" style={{ backgroundColor: 'transparent' }} />
         </TimelineFloat>
       )}
 
       {showFrontPaginationSpinner && (
         <TimelineFloat position="Bottom" style={timelineBottomFloatLift}>
-          <Spinner variant="Secondary" size="400" />
+          <Spinner variant="Secondary" size="400" style={{ backgroundColor: 'transparent' }} />
         </TimelineFloat>
       )}