diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -1,12 +1,15 @@
 // @flow
 
+import invariant from 'invariant';
 import * as React from 'react';
 import 'react-circular-progressbar/dist/styles.css';
 import { AlertCircle as AlertCircleIcon } from 'react-feather';
 
+import type { Shape } from 'lib/types/core.js';
 import type { EncryptedMediaType } from 'lib/types/media-types.js';
 
 import { decryptMedia } from './encryption-utils.js';
+import LoadableVideo from './loadable-video.react.js';
 import css from './media.css';
 import LoadingIndicator from '../loading-indicator.react.js';
 
@@ -14,10 +17,14 @@
   +holder: string,
   +encryptionKey: string,
   +type: EncryptedMediaType,
+  +thumbnailHolder: ?string,
+  +thumbnailEncryptionKey: ?string,
+  +placeholderSrc?: ?string,
+  +elementStyle?: ?Shape<CSSStyleDeclaration>,
 };
 
 function EncryptedMultimedia(props: Props): React.Node {
-  const { holder, encryptionKey } = props;
+  const { holder, encryptionKey, placeholderSrc, elementStyle } = props;
 
   const [source, setSource] = React.useState(null);
   const videoRef = React.useRef(null);
@@ -80,9 +87,30 @@
 
   let mediaNode;
   if (props.type === 'encrypted_photo') {
-    mediaNode = <img src={source?.uri} key={holder} />;
+    mediaNode = (
+      <img
+        src={source?.uri ?? placeholderSrc}
+        key={holder}
+        style={elementStyle}
+      />
+    );
   } else {
-    mediaNode = <video controls ref={videoRef} key={holder} />;
+    const { thumbnailHolder, thumbnailEncryptionKey } = props;
+    invariant(
+      thumbnailHolder && thumbnailEncryptionKey,
+      'Thumbnail missing for encrypted video',
+    );
+
+    mediaNode = (
+      <LoadableVideo
+        uri={null}
+        ref={videoRef}
+        key={holder}
+        thumbnailSource={{ thumbnailHolder, thumbnailEncryptionKey }}
+        elementStyle={elementStyle}
+        thumbHashDataURL={placeholderSrc}
+      />
+    );
   }
 
   return (
diff --git a/web/media/media.css b/web/media/media.css
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -57,7 +57,8 @@
   height: 50px;
 }
 
-span.multimedia .loadingIndicator {
+span.multimedia .loadingIndicator,
+div.multimediaModalOverlay .loadingIndicator {
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -95,12 +95,29 @@
         media.type === 'encrypted_photo' || media.type === 'encrypted_video',
         'invalid media type',
       );
-      const { type, holder, encryptionKey } = media;
+      const {
+        type,
+        holder,
+        encryptionKey,
+        thumbnailHolder,
+        thumbnailEncryptionKey,
+      } = media;
+      const dimensions = this.state.dimensions ?? media.dimensions;
+      const elementStyle = dimensions
+        ? {
+            width: `${dimensions.width}px`,
+            height: `${dimensions.height}px`,
+          }
+        : undefined;
       mediaModalItem = (
         <EncryptedMultimedia
           type={type}
           holder={holder}
           encryptionKey={encryptionKey}
+          thumbnailHolder={thumbnailHolder}
+          thumbnailEncryptionKey={thumbnailEncryptionKey}
+          placeholderSrc={placeholderImage}
+          elementStyle={elementStyle}
         />
       );
     }
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -184,13 +184,17 @@
     mediaSource.type === 'encrypted_photo' ||
     mediaSource.type === 'encrypted_video'
   ) {
-    const { type, holder } = mediaSource;
+    const { type, holder, thumbnailHolder } = mediaSource;
     invariant(encryptionKey, 'encryptionKey undefined for encrypted media');
     mediaElement = (
       <EncryptedMultimedia
         type={type}
         holder={holder}
         encryptionKey={encryptionKey}
+        thumbnailHolder={thumbnailHolder}
+        thumbnailEncryptionKey={thumbnailEncryptionKey}
+        elementStyle={elementStyle}
+        placeholderSrc={placeholderImage}
       />
     );
   }