Is there a way to set the line-height or control the max size for the caption display? We have some captions that fall to a 3rd line, but the text gets cut off halfway through the last line when it does. We'd like to keep the font-size large, but still be able to go to a 3rd line if needed.
Hi there,
Is it possible to send me a URL to a reproduction page that shows the captions intermittently falling to a third line?
Thank you.
Hi,
Here is a sample: http://www.athenaonline.com/testing/jwplayer/caption_test.html
You can see the caption around 24s drops to a third line and is cut off. I can go to a smaller font size, but we'd prefer to stay with this size. I've tested other players that handle a third line just fine.
Hi there,
Thank you for the URL. It looks like this is an issue when the player is rendering the captions, but it can be worked around by adding renderCaptionsNatively: true to your player setup, as you can see on this demo page.
I will escalate the bug in the player’s captions renderer to our engineers, but I recommend using renderCaptionsNatively: true until a fix can be released.
Thank you.
Thank you, that does seem to work. Can you please remove your demo page, I don't want that video shared permanently. I only used it for the sample page temporarily, with the plan to take it down once a solution was worked out.
Is there a way to add some padding to the caption display box?
Hi Scott,
I deleted that page for you.
As for the padding, you can alter the CSS properties for the captions overlay via the .jw-video::-webkit-media-text-track-display selector.
For example,
.jw-video::-webkit-media-text-track-display {
padding: 1.25em;
}It appears to render a little asymmetrically, so you will probably want to play around with padding-top and padding-bottom.
Please let me know if you need any more help or have any other questions.
Thank you!
Thank you, works great.
One last minor thing, it seems like the captions are slightly above the bottom of the player, is there a CSS property to set that so it is all the way to the bottom?
Also, when the controls appear, there is a very large gap between the captions and controls. Is there a CSS property for closing that gap so that the captions sit right above the controls with no gap?
Thank you for your help.
Hi Scott,
For positioning, things get a little trickier because if you change the positioning of the captions with CSS, it may look fine when the captions are one line but not when they are showing two or three lines.
For that reason, we recommend adding positioning styling within the VTT captions file themselves. You can find more information on the Mozilla Developer Network.
Please let me know if you need any more help or have any other questions.
Thank you!