question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multi-line captions not displaying on two lines (with fix)

See original GitHub issue
  • Issue does not already exist
  • Issue observed on https://plyr.io => (Captions on website are not multi-line)

Expected behaviour

The multi-line captions should appear underneath each other, instead of rendering on one line.

Actual behaviour

All the browsers I tested display the captions on line (except Edge). See the fix below.

Note: Edge has no issues with the multi-line captions and display it perfectly due to rendering <br> in vtt file.

Also, I noticed that when a caption dissapears or appears and you have scrolled down the page. Your page will go become smaller or larger See video: https://puu.sh/x0z96/b018f69d54.mp4

Environment

  • Browsers: Chrome 59+, Firefox 41+, Opera 46.0.2597.57, IE11
  • Operating System: Windows
  • Version: 10

Players affected:

  • HTML5 Video
  • HTML5 Audio
  • YouTube ==> Not tested
  • Vimeo ==> Not tested

Steps to reproduce

  • Add a multi-line caption file to any browser

Viewable at my site: https://dojocasts.com/en/lessen/bekijk/sully

Fixing

.plyr__captions span {
    /* ... */
    white-space: pre;
}

Before image

After image

Relevant links

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
kkealycommented, Aug 22, 2017

There is an issue with this fix. If a line is longer than the width the player, the overflowing part of it won’t be displayed.

This is the proper fix:

.plyr__captions span {
    /* ... */
    white-space: pre-wrap;
}

Needless to say, it should be merged into master ASAP.

1reaction
sampottscommented, Aug 28, 2017

I’ll add this into V3. Cheers 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Closed Captions Multiline (Premiere Pro 14.9 and earlier)
Solved: I am trying to force long captions, or large font sizes onto 2 lines using PP2019. When enlarged: Is this possible?
Read more >
Multi-line subtitles not displaying properly : r/TeaTV - Reddit
Just a bug/suggestion. Multi-line subtitles are not properly displayed. The newline character is skipped and everything is on one line and ...
Read more >
Multi-line subtitles not displaying properly - Emby
This is related to subtitle. The subtitle I test was in .SRT format. Bug is when there are 2 lines, Emby try to...
Read more >
how can i display multiple lines text caption in select tag?
Simply, You can do with the css which is below: <style> .test {word-wrap:break-word;} </style> <html><header><title></title></header> <body> ...
Read more >
Side-by-side captions in minipage run too long, don't wrap to ...
I have two images which I want to place side-by-side in my article, but when I do, the captions don't wrap onto multiple...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found