diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index 9ae762586..c6d07db6a 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -119,6 +119,13 @@ class MediaModal extends ImmutablePureComponent {
     }
   }
 
+  handleCloserClick = e => {
+    const activeSlide = document.querySelector('.media-modal .react-swipeable-view-container > div[aria-hidden="false"]');
+    if (e.target === activeSlide || !activeSlide.contains(e.target)) {
+      this.props.onClose();
+    }
+  }
+
   render() {
     const { media, status, account, intl, onClose } = this.props;
     const { navigationHidden } = this.state;
@@ -236,7 +243,7 @@ class MediaModal extends ImmutablePureComponent {
         <div
           className='media-modal__closer'
           role='presentation'
-          onClick={onClose}
+          onClick={this.handleCloserClick}
         >
           <ReactSwipeableViews
             style={swipeableViewsStyle}
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 015b7c294..845dc2697 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -63,6 +63,11 @@
     justify-content: center;
   }
 
+  .audio-player {
+    max-width: 80vw;
+    max-height: 80vh;
+  }
+
   .extended-video-player {
     width: 100%;
     height: 100%;