From d33dedd03872b62578477e9b3f309a911fd961b0 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Wed, 15 Jul 2026 16:39:20 +0200
Subject: [PATCH] Hide the browser's default placeholder image for videos

Source: https://stackoverflow.com/a/79058682
---
 src/graphics/video-placeholder.gif             | Bin 0 -> 78 bytes
 src/room/VideoPreview.tsx                      |   4 ++++
 src/room/__snapshots__/LobbyView.test.tsx.snap |   3 +++
 src/tile/MediaView.tsx                         |   4 ++++
 4 files changed, 11 insertions(+)
 create mode 100644 src/graphics/video-placeholder.gif

diff --git a/src/graphics/video-placeholder.gif b/src/graphics/video-placeholder.gif
new file mode 100644
index 0000000000000000000000000000000000000000..db8d3841b4620155c28fd4073d77aa1d7e3e75a8
GIT binary patch
literal 78
zcmZ?wbhEHb6ky<FSjfQe|NnmmFbQNR{u6XAN=+<DO;IS%EXh!C_w)^5Q2fcl$i=|O
bpaWFK0Mf+3#MRTk^7LE&#dD^JGFSruP52p<

literal 0
HcmV?d00001

diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index 3efcaba10..e6e54370b 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
 import { TileAvatar } from "../tile/TileAvatar";
 import styles from "./VideoPreview.module.css";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import videoPlaceholder from "../graphics/video-placeholder.gif";
 
 export type MatrixInfo = {
   userId: string;
@@ -74,6 +75,9 @@ export const VideoPreview: FC<Props> = ({
         // There's no reason for this to be focusable
         tabIndex={-1}
         disablePictureInPicture
+        // Set the placeholder to a small transparent image. (On Android web
+        // views the default poster image is particularly ugly.)
+        poster={videoPlaceholder}
       />
       {(!videoEnabled || cameraIsStarting) && (
         <>
diff --git a/src/room/__snapshots__/LobbyView.test.tsx.snap b/src/room/__snapshots__/LobbyView.test.tsx.snap
index d306e24ab..f3352a6ec 100644
--- a/src/room/__snapshots__/LobbyView.test.tsx.snap
+++ b/src/room/__snapshots__/LobbyView.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
@@ -280,6 +281,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
@@ -558,6 +560,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
         <video
           disablepictureinpicture=""
           playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
           tabindex="-1"
         />
         <div
diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx
index 09c4c65c3..a00fb6cba 100644
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -25,6 +25,7 @@ import {
 import { type ReactionOption } from "../reactions";
 import { ReactionIndicator } from "../reactions/ReactionIndicator";
 import { RTCConnectionStats } from "../RTCConnectionStats";
+import videoPlaceholder from "../graphics/video-placeholder.gif";
 
 interface Props extends ComponentProps<typeof animated.div> {
   className?: string;
@@ -154,6 +155,9 @@ export const MediaView: FC<Props> = ({
             tabIndex={-1}
             disablePictureInPicture
             data-testid="video"
+            // Set the placeholder to a small transparent image. (On Android web
+            // views the default poster image is particularly ugly.)
+            poster={videoPlaceholder}
           />
         )}
       </div>