From e81c9cf97df800f539c20ec27b28a19de5bdc191 Mon Sep 17 00:00:00 2001
From: John <24556317+Johnnycyan@users.noreply.github.com>
Date: Sat, 7 Mar 2026 15:13:35 -0500
Subject: [PATCH] Update play icon on embedded videos. Adding backdrop to it as
 well that can be clicked in addition to the button area to initiate video
 playback.

---
 .../message/content/VideoContent.tsx          | 20 ++++++++--------
 .../components/message/content/style.css.ts   | 23 +++++++++++++++++++
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx
index b33ec2720f..bfc1a4ced1 100644
--- a/src/app/components/message/content/VideoContent.tsx
+++ b/src/app/components/message/content/VideoContent.tsx
@@ -130,17 +130,15 @@ export const VideoContent = as<'div', VideoContentProps>(
           </Box>
         )}
         {!autoPlay && !blurred && srcState.status === AsyncStatus.Idle && (
-          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
-            <Button
-              variant="Secondary"
-              fill="Solid"
-              radii="300"
-              size="300"
-              onClick={loadSrc}
-              before={<Icon size="Inherit" src={Icons.Play} filled />}
-            >
-              <Text size="B300">Watch</Text>
-            </Button>
+          <Box
+            className={css.MediaBackdrop}
+            alignItems="Center"
+            justifyContent="Center"
+            onClick={loadSrc}
+          >
+            <div className={css.WatchButton}>
+              <Icon style={{ width: '100%', height: '100%' }} size="Inherit" src={Icons.Play} filled />
+            </div>
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
diff --git a/src/app/components/message/content/style.css.ts b/src/app/components/message/content/style.css.ts
index bb5d8484f4..97fe57f8c4 100644
--- a/src/app/components/message/content/style.css.ts
+++ b/src/app/components/message/content/style.css.ts
@@ -38,3 +38,26 @@ export const Blur = style([
     filter: 'blur(44px)',
   },
 ]);
+
+export const MediaBackdrop = style([
+  AbsoluteContainer,
+  {
+    cursor: 'pointer',
+  },
+]);
+
+export const WatchButton = style({
+  width: '4rem',
+  height: '4rem',
+  color: 'white',
+  opacity: 0.6,
+  transition: 'opacity 0.25s',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  selectors: {
+    [`${MediaBackdrop}:hover &`]: {
+      opacity: 0.8,
+    },
+  },
+});