Change play icon and add clickable backdrop on embedded videos.

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 && (

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,
+    },
+  },
+});