diff --git a/web/src/index.css b/web/src/index.css
index f7b637f..3dd4641 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -14,7 +14,7 @@
 	--small-font-size: .875rem;
 
 	--code-background-color: rgba(0, 0, 0, 0.15);
-	--media-placeholder-default-background: rgba(0, 0, 0, .1);
+	--media-placeholder-default-background: #ccc;
 	--media-placeholder-button-background: rgba(255, 255, 255, .5);
 
 	--primary-color: #00c853;
@@ -102,7 +102,7 @@
 		--link-text-color: #4187eb;
 
 		--code-background-color: rgba(255, 255, 255, 0.1);
-		--media-placeholder-default-background: rgba(255, 255, 255, .1);
+		--media-placeholder-default-background: #333;
 		--media-placeholder-button-background: rgba(0, 0, 0, .5);
 
 		--primary-color: #00b24a;
diff --git a/web/src/ui/timeline/content/MediaMessageBody.tsx b/web/src/ui/timeline/content/MediaMessageBody.tsx
index 01fc95f..d73639f 100644
--- a/web/src/ui/timeline/content/MediaMessageBody.tsx
+++ b/web/src/ui/timeline/content/MediaMessageBody.tsx
@@ -59,7 +59,9 @@ const MediaMessageBody = ({ event, room, sender }: EventContentProps) => {
 		}
 	}
 	const renderMediaElem = !supportsClickToShow || showPreviewsByDefault || clickedShow
-	const renderPlaceholderElem = supportsClickToShow && (!renderMediaElem || !!contentWarning || !loaded)
+	const renderPlaceholderElem = supportsClickToShow
+		&& !clickedShow
+		&& (!renderMediaElem || !!contentWarning || !loaded)
 	const isLoadingOnlyCover = !loaded && !contentWarning && renderMediaElem
 
 	const [mediaContent, containerClass, containerStyle] = useMediaContent(content, event.type, undefined, onLoad)