diff --git a/common/app/components/VideoPlayer.tsx b/common/app/components/VideoPlayer.tsx
index cda01ccd..cd53d2ae 100755
--- a/common/app/components/VideoPlayer.tsx
+++ b/common/app/components/VideoPlayer.tsx
@@ -69,8 +69,8 @@ const useStyles = makeStyles({
         paddingLeft: 20,
         paddingRight: 20,
         textAlign: 'center',
-        whiteSpace: 'pre-wrap',
-        lineHeight: 'normal',
+        whiteSpace: 'normal',
+        lineHeight: 'inherit',
     },
 });
 
@@ -165,7 +165,9 @@ const showingSubtitleHtml = (
 `;
     }
 
-    return `<span style="${subtitleStyles}" class="${subtitleClasses}">${subtitle.text}</span>`;
+    const lines = subtitle.text.split('\n');
+    const wrappedText = lines.map((line) => `<p class="subtitle-line">${line}</p>`).join('');
+    return `<span style="${subtitleStyles}" class="${subtitleClasses}">${wrappedText}</span>`;
 };
 
 interface ShowingSubtitleProps {
@@ -196,7 +198,12 @@ const ShowingSubtitle = ({
             />
         );
     } else {
-        content = <span style={subtitleStyles}>{subtitle.text}</span>;
+        const lines = subtitle.text.split('\n');
+        content = lines.map((line, index) => (
+            <p key={index} className="subtitle-line" style={subtitleStyles}>
+                {line}
+            </p>
+        ));
     }
 
     return (
diff --git a/common/app/components/video-player.css b/common/app/components/video-player.css
index 9124b98b..7e834621 100644
--- a/common/app/components/video-player.css
+++ b/common/app/components/video-player.css
@@ -11,3 +11,8 @@
 .asbplayer-subtitles-blurred:hover {
     filter: none;
 }
+
+.subtitle-line {
+    margin: 0;
+    padding: 0;
+}