diff --git a/css/_transcription-subtitles.scss b/css/_transcription-subtitles.scss
index b55a03bd3..fdd641aae 100644
--- a/css/_transcription-subtitles.scss
+++ b/css/_transcription-subtitles.scss
@@ -2,12 +2,19 @@
     bottom: 10%;
     font-size: 16px;
     font-weight: 1000;
+    left: 50%;
+    max-width: 50vw;
     opacity: 0.80;
+    pointer-events: none;
     position: absolute;
     text-shadow: 0px 0px 1px rgba(0,0,0,0.3),
     0px 1px 1px rgba(0,0,0,0.3),
     1px 0px 1px rgba(0,0,0,0.3),
     0px 0px 1px rgba(0,0,0,0.3);
-    width: 100%;
-    z-index: $zindex2;
+    transform: translateX(-50%);
+    z-index: $filmstripVideosZ + 1;
+
+    span {
+        background: black;
+    }
 }
diff --git a/react/features/subtitles/components/TranscriptionSubtitles.web.js b/react/features/subtitles/components/TranscriptionSubtitles.web.js
index 0f883959f..28b1dcc46 100644
--- a/react/features/subtitles/components/TranscriptionSubtitles.web.js
+++ b/react/features/subtitles/components/TranscriptionSubtitles.web.js
@@ -46,7 +46,9 @@ class TranscriptionSubtitles extends Component<Props> {
                     text += stable + unstable;
                 }
                 paragraphs.push(
-                    <p key = { transcriptMessageID }> { text } </p>
+                    <p key = { transcriptMessageID }>
+                        <span>{ text }</span>
+                    </p>
                 );
             }
         }