diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
index 539cff8e3..692e21f4b 100644
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -1,125 +1,134 @@
 // @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';
 
 type Props = {
   +holder: string,
   +encryptionKey: string,
   +type: EncryptedMediaType,
-  +thumbnailHolder: ?string,
-  +thumbnailEncryptionKey: ?string,
+  +thumbnailHolder?: ?string,
+  +thumbnailEncryptionKey?: ?string,
   +placeholderSrc?: ?string,
+  +multimediaClassName?: string,
   +elementStyle?: ?Shape<CSSStyleDeclaration>,
 };
 
 function EncryptedMultimedia(props: Props): React.Node {
-  const { holder, encryptionKey, placeholderSrc, elementStyle } = props;
+  const {
+    holder,
+    encryptionKey,
+    placeholderSrc,
+    elementStyle,
+    multimediaClassName,
+  } = props;
 
   const [source, setSource] = React.useState(null);
   const videoRef = React.useRef(null);
 
   React.useEffect(() => {
     let isMounted = true,
       uriToDispose;
     setSource(null);
 
     const loadDecrypted = async () => {
       const { result } = await decryptMedia(holder, encryptionKey);
       if (!isMounted) {
         return;
       }
 
       if (result.success) {
         const { uri } = result;
         setSource({ uri });
         uriToDispose = uri;
       } else {
         setSource({ error: result.reason });
       }
     };
 
     loadDecrypted();
 
     return () => {
       isMounted = false;
       if (uriToDispose) {
         URL.revokeObjectURL(uriToDispose);
       }
     };
   }, [holder, encryptionKey]);
 
   // we need to update the video source when the source changes
   // because re-rendering the <source> element wouldn't reload parent <video>
   React.useEffect(() => {
     if (videoRef.current && source?.uri) {
       videoRef.current.src = source.uri;
       videoRef.current.load();
     }
   }, [source]);
 
   let loadingIndicator, errorIndicator;
 
   if (!source) {
     loadingIndicator = (
       <LoadingIndicator
         status="loading"
         size="large"
         color="white"
         loadingClassName={css.loadingIndicator}
       />
     );
   }
 
   if (source?.error) {
     errorIndicator = <AlertCircleIcon className={css.uploadError} size={36} />;
   }
 
   let mediaNode;
   if (props.type === 'encrypted_photo') {
     mediaNode = (
       <img
         src={source?.uri ?? placeholderSrc}
         key={holder}
+        className={multimediaClassName}
         style={elementStyle}
       />
     );
   } else {
     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}
+        multimediaClassName={multimediaClassName}
       />
     );
   }
 
   return (
     <>
       {mediaNode}
       {loadingIndicator}
       {errorIndicator}
     </>
   );
 }
 
 export default EncryptedMultimedia;
diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js
index 808a76d39..bdf2dbbb8 100644
--- a/web/media/loadable-video.react.js
+++ b/web/media/loadable-video.react.js
@@ -1,86 +1,99 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import type { Shape } from 'lib/types/core.js';
 
 import { decryptMedia } from './encryption-utils.js';
 import { preloadImage } from './media-utils.js';
 
 type ThumbnailSource =
   | {
       +thumbnailURI: string,
     }
   | {
       +thumbnailHolder: string,
       +thumbnailEncryptionKey: string,
     };
 type Props = {
   +uri: ?string,
   +thumbnailSource: ThumbnailSource,
   +thumbHashDataURL?: ?string,
   +elementStyle?: ?Shape<CSSStyleDeclaration>,
+  +multimediaClassName?: string,
 };
 
 function LoadableVideo(props: Props, videoRef: React.Ref<'video'>): React.Node {
-  const { uri, thumbHashDataURL, thumbnailSource, elementStyle } = props;
+  const {
+    uri,
+    thumbHashDataURL,
+    thumbnailSource,
+    elementStyle,
+    multimediaClassName,
+  } = props;
   const { thumbnailURI, thumbnailHolder, thumbnailEncryptionKey } =
     thumbnailSource;
 
   const [thumbnailImage, setThumbnailImage] = React.useState(null);
 
   React.useEffect(() => {
     let isMounted = true,
       uriToDispose;
     setThumbnailImage(null);
 
     (async () => {
       if (thumbnailURI) {
         await preloadImage(thumbnailURI);
         if (isMounted) {
           setThumbnailImage(thumbnailURI);
         }
         return;
       }
 
       invariant(
         thumbnailHolder && thumbnailEncryptionKey,
         'invalid encrypted thumbnail source',
       );
       const { result } = await decryptMedia(
         thumbnailHolder,
         thumbnailEncryptionKey,
       );
       if (isMounted && result.success) {
         setThumbnailImage(result.uri);
         uriToDispose = result.uri;
       }
     })();
 
     return () => {
       isMounted = false;
       if (uriToDispose) {
         URL.revokeObjectURL(uriToDispose);
       }
     };
   }, [thumbnailURI, thumbnailHolder, thumbnailEncryptionKey]);
 
   let videoSource;
   if (uri) {
     videoSource = <source src={uri} />;
   }
   const poster = thumbnailImage ?? thumbHashDataURL;
   return (
-    <video controls poster={poster} style={elementStyle} ref={videoRef}>
+    <video
+      controls
+      poster={poster}
+      className={multimediaClassName}
+      style={elementStyle}
+      ref={videoRef}
+    >
       {videoSource}
     </video>
   );
 }
 
 const MemoizedLoadableVideo: React.AbstractComponent<Props, HTMLVideoElement> =
   React.memo<Props, HTMLVideoElement>(
     React.forwardRef<Props, HTMLVideoElement>(LoadableVideo),
   );
 
 export default MemoizedLoadableVideo;