diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -227,6 +227,7 @@
     const multimediaPreviews = pendingUploads.map(pendingUpload => (
       <Multimedia
         uri={pendingUpload.uri}
+        type={pendingUpload.mediaType}
         pendingUpload={pendingUpload}
         remove={cancelPendingUpload}
         multimediaCSSClass={css.multimedia}
diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -41,6 +41,7 @@
       multimedia.push(
         <Multimedia
           uri={singleMedia.uri}
+          type={singleMedia.type}
           pendingUpload={pendingUpload}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
diff --git a/web/media/media.css b/web/media/media.css
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -14,7 +14,8 @@
   min-height: 50px;
   min-width: 50px;
 }
-span.multimedia > .multimediaImage > img {
+span.multimedia > .multimediaImage > img,
+span.multimedia > .multimediaImage > video {
   max-height: 200px;
   max-width: 100%;
 }
@@ -81,7 +82,8 @@
   display: flex;
   justify-content: center;
 }
-div.multimediaModalOverlay > img {
+div.multimediaModalOverlay > img,
+div.multimediaModalOverlay > video {
   object-fit: scale-down;
   width: auto;
   height: auto;
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
@@ -11,6 +11,7 @@
 } from 'react-feather';
 
 import { useModalContext } from 'lib/components/modal-provider.react';
+import type { MediaType } from 'lib/types/media-types';
 
 import Button from '../components/button.react';
 import { type PendingMultimediaUpload } from '../input/input-state';
@@ -19,6 +20,7 @@
 
 type BaseProps = {
   +uri: string,
+  +type: MediaType,
   +pendingUpload?: ?PendingMultimediaUpload,
   +remove?: (uploadID: string) => void,
   +multimediaCSSClass: string,
@@ -46,7 +48,14 @@
   render(): React.Node {
     let progressIndicator, errorIndicator, removeButton;
 
-    const { pendingUpload, remove } = this.props;
+    const {
+      pendingUpload,
+      remove,
+      type,
+      uri,
+      multimediaImageCSSClass,
+      multimediaCSSClass,
+    } = this.props;
     if (pendingUpload) {
       const { progressPercent, failed } = pendingUpload;
 
@@ -81,20 +90,35 @@
 
     const imageContainerClasses = [
       css.multimediaImage,
-      this.props.multimediaImageCSSClass,
+      multimediaImageCSSClass,
     ];
     imageContainerClasses.push(css.clickable);
 
-    const containerClasses = [css.multimedia, this.props.multimediaCSSClass];
-    return (
-      <span className={classNames(containerClasses)}>
+    let mediaNode;
+    if (type === 'photo') {
+      mediaNode = (
         <Button
           className={classNames(imageContainerClasses)}
           onClick={this.onClick}
         >
-          <img src={this.props.uri} />
+          <img src={uri} />
           {removeButton}
         </Button>
+      );
+    } else {
+      mediaNode = (
+        <div className={classNames(imageContainerClasses)}>
+          <video controls>
+            <source src={uri} />
+          </video>
+        </div>
+      );
+    }
+
+    const containerClasses = [css.multimedia, multimediaCSSClass];
+    return (
+      <span className={classNames(containerClasses)}>
+        {mediaNode}
         {progressIndicator}
         {errorIndicator}
       </span>