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

[sigfriedseldeslachts]

• [x] 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:

• [x] 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

After

Relevant links

• https://dojocasts.com/en/lessen/bekijk/sully

[silverxp]

I had the same problem. This solved it and should be marked as a bug (fixed). Just for styling purposes I also added the following code to make sure there is enough space between the two lines so that the black backgrounds don't overlap.

.plyr__captions span {
    line-height: 180%;
}

[kkealy]

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.

[sampotts]

I'll add this into V3. Cheers 👍

[kkealy]

An additional change is required for this to work with Firefox (tested on v54.0.1), which requires manual caption rendering.

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 352e011..2afd843 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1066,7 +1066,12 @@
                                             index = 1;
                                         }

-                                        plyr.captions[r] = [parts[index], parts[index + 1]];
+                                        var captionText = '';
+                                        for (var s = index +1; s < parts.length; s++)
+                                            captionText += parts[s] + lineSeparator;
+
+                                        plyr.captions[r] = [parts[index], captionText];
                                     }

                                     // Remove first element ('VTT')

[sampotts]

Closing this one as I think it's fixed but feel free to re-open if not solved in v3 👍