Captions duplicated for Vimeo

[matoni555]

Hello, I use player with Vimeo video with captions. But captions are duplicated and too big:

Expected behaviour

Not duplicated captions. Too big captions hidden.

Actual behaviour

Captions duplicated and too big.

Environment

• Browser: Chrome
• Version: 65.0.3325.181
• Operating System: Windows
• Version: 11

Thank you

[sampotts]

What size screen? I'm not sure we can do a lot about this as Vimeo doesn't let you disable their caption rendering via their API.

[matoni555]

I use iframe size same as in screenshot above: 338x190 px. It is strange that in Vimeo captions example are captions small: https://help.vimeo.com/hc/en-us/articles/224968828-Captions-and-subtitles

[sampotts]

It's because we have to do some magic to hide the Vimeo controls which means Vimeo thinks the window is large and renders the captions to match. It's pretty painful to work with.

[sampotts]

This should be resolved in v3.2.0 👍 Feel free to re-open if not.

[matoni555]

@sampotts This issue is not resolved. Captions are still too big, see http://www.matonoha.cz/_html/plyr/

Thanks

[friday]

I think that size combined with multi-line cues is more than the css hack can handle, but maybe Sam has some tricks up his sleeves.

If you meant the actual size, it is ok imo. I wouldn't want it much smaller anyway. If you do you can change it with css. Perhaps it could be positioned closer to the bottom with small iframes/viewports.

[sampotts]

This is a tricky one. I need to take another look as Vimeo doesn't seem to allow you to turn off their rendering of the captions without them also not being available via the API if I remember correctly. The offset hack to hide the controls also means the captions get larger (they must use some sort of responsive type mechanism) so it's a fine balance. I'll take another look as this is a good example to test with.

[samhibberd]

Do we think this is something that can be fixed? If not has anyone else discovered any other work arounds? Thanks, Sam

[friday]

It's not possible to get cues via the Vimeo API unless you enable captions and use the change event. If you enable them it's not possible to hide them safely. The css hack which is currently used doesn't work for all resolutions.

So I would say no, it's not something that can be fixed.

You can disable captions, not use Vimeo, or use their own player.

[samhibberd]

Thanks for the clarification @friday

[xnetdude]

How do you disable captions if you don't have control over the source vimeo material?

[diegoalex]

Hi Guys, I came up to the same issue here. I've been trying to do some workaround but with no success. My first idea was to hide the caption inside the iFrame with javascript, but I get cross-origin issue .

The easier way to 'fix' it would be to force a display:none in the class '.vp-captions' inside the iframe. But i cant do that =(

Any of you guys found a way to fix it?

Thanks

[friday]

If you want to control aspects like this hosting your own HTML5 video or streaming it is the only way. Vimeo and YouTube will always want to put their own brand on the player, which is reasonable seeing as they pay for the hosting and bandwith.

[diegoalex]

If you want to control aspects like this hosting your own HTML5 video or streaming it is the only way. Vimeo and YouTube will always want to put their own brand on the player, which is reasonable seeing as they pay for the hosting and bandwith.

But the Subtitle issue is something related to PLYR, when I open the vimeo video embed somewhere it does't happen. If you check the CSS inside the iFrame you can see that:

For some reason, when you're wrapped by the PLYR it adds this huge font-size.

[explorier]

Just wanted to bump this issue, encountered it after thinking Vimeo captions were working well. The strange thing is they worked fine when testing on this video embed: <iframe src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency allow="autoplay" ></iframe>

But then when I actually plugged in the client's videos and subtitles, the huge captions appeared. I'm not sure exactly what the difference is here, maybe just the example video had short enough captions that the huge captions didn't quite break out of the hidden iframe?

[sjonkeesse]

I'm experiencing the same issue as well. I've noticed that it only happens with long sentences. When I reduce the .vp-captions font-size by ~5%, they don't seem to appear anymore (with my sentence lengths). Is there a way that I can tune the 'offset hack'? That way I can potentially reduce the duplicate subtitles somewhat.

[michelstomp]

I'm experiencing the same issue as well. I've noticed that it only happens with long sentences. When I reduce the .vp-captions font-size by ~5%, they don't seem to appear anymore (with my sentence lengths). Is there a way that I can tune the 'offset hack'? That way I can potentially reduce the duplicate subtitles somewhat.

I see this working as well when I insert it straight into my browser inspector. But not when adding it to my CSS file, or as inline style in my DOM. It does not affect elements in the iframe. How should this work?

[oalexdoda]

I'm getting the same issue on Vimeo-hosted videos passed through Plyr (latest version on Chrome macOS). Looks like it's only happening when captions are a bit longer.

Here's a demo: Demo Screen Recording

Any thoughts on what can be done @sampotts ?

Thank you!

[oalexdoda]

Following up here, @sampotts - my devs couldn't find a quick workaround. Any idea on why Plyr might mess up formatting for longer Vimeo captions?

[sampotts]

It's because we can't actually hide the Vimeo captions. I'd need to check again but there was previously no way to disable the built-in captions via the available options. All we can do is hide them via the same technique we use to hide their controls but this has the effect of making the captions huge because Vimeo thinks the window is massive.

[oalexdoda]

Yeah, but it doesn’t happen with the regular Vimeo captions and it’s only for captions that are longer.

Are you sure it’s not something related to the Plyr wrapper and the way it affects the iFrame? On Dec 22, 2020, 10:49 PM +0200, Sam Potts [email protected], wrote:

It's because we can't actually hide the Vimeo captions. I'd need to check again but there was previously no way to disable the built-in captions via the available options. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[sampotts]

You can try it. Get the iframe URL, open it and resize the window to full screen. Big captions. Because we only resize vertically and that must be what Vimeo bases the resizing on, it makes the problem worse as the captions wrap and become taller vertically, overlapping into the part of the player that's visible. The only ways it can be resolved are:

• we disable the custom caption rendering
• Vimeo adds an option to their player.js API

[Tumbuctoo]

Could we ALL try to communicate with Vimeo so that they add the proper option to their player.js.API? How could we all of us, as a bunch, make sure they know we would need them to add such an option? Sorry if I seem too naive but things also work like this (sometimes); by talking. Any ideas?

[oalexdoda]

Did anybody find a workaround?

[Tumbuctoo]

As said, it seems as there is no workaround unless talking to Vimeo staff.

[crispycrispycrispy]

Hey guys I've been at this issue for some time now, since I use it in production.

I have found a fix but need to test further... It actually uses an open issue in Vimeo's player.js here I actually initialize the vimeo player with background: true which inadvertently also removes the exaggerated captions...

It sounds so hacky but it is a quick fix.

I love this player and am open to feedback and tests about this fix. I can also create a PR if necessary

Thanks guys for your efforts.

[darkylmnx]

Same issue happening here. Got this in production...

[irasantiago]

i just opened this related issue. it might help us all get it on Vimeo's radar if there are more thumbs up on it https://github.com/vimeo/player.js/issues/747

[modi98]

Hey guys I've been at this issue for some time now, since I use it in production.

I have found a fix but need to test further... It actually uses an open issue in Vimeo's player.js here I actually initialize the vimeo player with background: true which inadvertently also removes the exaggerated captions...

It sounds so hacky but it is a quick fix.

I love this player and am open to feedback and tests about this fix. I can also create a PR if necessary

Thanks guys for your efforts.

This worked for me too, effective way to hide the texttrack from plyr without messing around with elements inside the iframe

[reubenfield]

Hey guys I've been at this issue for some time now, since I use it in production.

I have found a fix but need to test further... It actually uses an open issue in Vimeo's player.js here I actually initialize the vimeo player with background: true which inadvertently also removes the exaggerated captions...

It sounds so hacky but it is a quick fix.

I love this player and am open to feedback and tests about this fix. I can also create a PR if necessary

Thanks guys for your efforts.

Hi @crispycrispycrispy and @modi98. Is this still working for you in early 2024? Would you mind please sharing a link?