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
@@ -9,6 +9,7 @@
 import css from './media.css';
 
 type BaseProps = {
+  +type: string,
   +uri: string,
 };
 
@@ -26,6 +27,17 @@
   }
 
   render(): React.Node {
+    let mediaModalItem;
+    if (this.props.type === 'photo') {
+      mediaModalItem = <img src={this.props.uri} />;
+    } else {
+      mediaModalItem = (
+        <video controls>
+          <source src={this.props.uri} />
+        </video>
+      );
+    }
+
     return (
       <div
         className={css.multimediaModalOverlay}
@@ -34,7 +46,7 @@
         tabIndex={0}
         onKeyDown={this.onKeyDown}
       >
-        <img src={this.props.uri} />
+        {mediaModalItem}
         <XCircleIcon
           onClick={this.props.popModal}
           className={css.closeMultimediaModal}
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
@@ -140,8 +140,8 @@
   };
 
   onClick: () => void = () => {
-    const { pushModal, uri } = this.props;
-    pushModal(<MultimediaModal uri={uri} />);
+    const { pushModal, type, uri } = this.props;
+    pushModal(<MultimediaModal type={type} uri={uri} />);
   };
 }
 
diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -7,6 +7,14 @@
   overflow: hidden;
 }
 
+div.transparentModalContainer {
+  display: flex;
+  border-radius: 8px;
+  flex-direction: column;
+  margin: 20px;
+  overflow: hidden;
+}
+
 div.modalContainerSmall {
   width: 330px;
 }
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -18,6 +18,7 @@
   +icon?: Icon,
   +onClose: () => void,
   +withCloseButton?: boolean,
+  +transparent?: boolean,
   +size?: ModalSize,
   +modalHeaderCentered?: boolean,
 };
@@ -34,11 +35,14 @@
     onClose,
     name,
     icon,
+    transparent = false,
     withCloseButton = true,
     modalHeaderCentered = false,
   } = props;
 
-  const modalContainerClasses = classNames(css.modalContainer, {
+  const modalContainerClasses = classNames({
+    [css.modalContainer]: transparent === false,
+    [css.modalContainerTransparent]: transparent === true,
     [css.modalContainerLarge]: size === 'large',
     [css.modalContainerSmall]: size === 'small',
   });
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -3,11 +3,14 @@
 import * as React from 'react';
 
 import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { Media } from 'lib/types/media-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useServerCall } from 'lib/utils/action-utils.js';
 
 import css from './thread-settings-media-gallery.css';
 import Tabs from '../../../components/tabs.react.js';
+import MultimediaModal from '../../../media/multimedia-modal.react.js';
 import Modal from '../../modal.react.js';
 
 type MediaGalleryTab = 'All' | 'Images' | 'Videos';
@@ -22,6 +25,7 @@
 function ThreadSettingsMediaGalleryModal(
   props: ThreadSettingsMediaGalleryModalProps,
 ): React.Node {
+  const { pushModal } = useModalContext();
   const { onClose, parentThreadInfo, limit, activeTab } = props;
   const { id: threadID } = parentThreadInfo;
   const modalName = 'Media';
@@ -42,6 +46,13 @@
     fetchData();
   }, [callFetchThreadMedia, threadID, limit]);
 
+  const onClick = React.useCallback(
+    (media: Media) => {
+      pushModal(<MultimediaModal type={media.type} uri={media.uri} />);
+    },
+    [pushModal],
+  );
+
   const filteredMediaInfos = React.useMemo(() => {
     if (tab === 'Images') {
       return mediaInfos.filter(mediaInfo => mediaInfo.type === 'photo');
@@ -59,11 +70,15 @@
   const mediaGalleryItems = React.useMemo(
     () =>
       filteredMediaInfos.map((media, i) => (
-        <div key={i} className={css.mediaContainer}>
+        <div
+          key={i}
+          onClick={() => onClick(media)}
+          className={css.mediaContainer}
+        >
           <img src={mediaCoverPhotos[i]} className={css.media} />
         </div>
       )),
-    [filteredMediaInfos, mediaCoverPhotos],
+    [filteredMediaInfos, onClick, mediaCoverPhotos],
   );
 
   const handleScroll = React.useCallback(