diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css
index b1fdfebb4..6430516bc 100644
--- a/ui/dist/themes/dark.css
+++ b/ui/dist/themes/dark.css
@@ -48,6 +48,9 @@
     --scrollbar-thumb-bg: rgba(255, 255, 255, 0.20);
     --scrollbar-thumb-hover-bg: rgba(255, 255, 255, 0.35);
 
+    /* Media */
+    --media-bg: #CCC;
+
     /* Divider */
     --divider: 1px solid rgba(255,255,255, 0.12);
 }
diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx
index f81f95e68..cfdc13099 100644
--- a/ui/js/component/video/internal/player.jsx
+++ b/ui/js/component/video/internal/player.jsx
@@ -176,7 +176,7 @@ class VideoPlayer extends React.PureComponent {
           <LoadingScreen status={noMetadataMessage} />}
         {unplayable &&
           <LoadingScreen status={unplayableMessage} spinner={false} />}
-        <div ref="media" />
+        <div ref="media" className="media" />
       </div>
     );
   }
diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx
index fb1bd3420..0a8410372 100644
--- a/ui/js/component/video/view.jsx
+++ b/ui/js/component/video/view.jsx
@@ -80,7 +80,7 @@ class Video extends React.PureComponent {
       loadStatusMessage = __("Downloading stream... not long left now!");
     }
 
-    let klasses = [];
+    let klasses = ["card"];
     klasses.push(obscureNsfw ? "video--obscured " : "");
     if (isLoading || isDownloading) klasses.push("video-embedded", "video");
     if (mediaType === "video") {
diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss
index 43fe41bfe..96599a669 100644
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@@ -133,6 +133,9 @@ $text-color: #000;
   --scrollbar-thumb-active-bg: var(--color-primary);
   --scrollbar-track-bg: transparent;
 
+  /* Media */
+  --media-bg: #FFF;
+
   /* Divider */
   --divider: 1px solid rgba(0, 0, 0, 0.12);
 }
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index be7733a21..458493d81 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -23,5 +23,6 @@
 @import "component/_markdown-editor.scss";
 @import "component/_scrollbar.scss";
 @import "component/_tabs.scss";
+@import "component/_media.scss";
 @import "page/_developer.scss";
 @import "page/_show.scss";
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
new file mode 100644
index 000000000..e235123f1
--- /dev/null
+++ b/ui/scss/component/_media.scss
@@ -0,0 +1,5 @@
+.media {
+  /* temp fix for text files */
+  background: var(--media-bg);
+  padding: 10px;
+}
diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss
index 39e9a0209..3f3204308 100644
--- a/ui/scss/component/_video.scss
+++ b/ui/scss/component/_video.scss
@@ -21,7 +21,6 @@ video {
   max-height: $height-video-embedded;
   height: $height-video-embedded;
   position: relative;
-  background: #000;
   video {
     height: 100%;
     width: 100%;