Closed Captions / Subtitles button missing in YouTube lightbox

Hey, happy new year to you all!

We’re just about to launch our first site on Cwicly and the client has pointed out, at the last minute, that the Closed Caption button is missing on all the video embeds we have added via lightboxes. I cannot see I toggle anywhere, and no combination of parameters on the URL seems to enable the button either.

I have also tried added the video to be hosted on the local server, but the light box method does not allow for adding a VTT transcript file as the default WordPress block does.

How do I enable Closed Captions in a lightbox?

Did you find this Stack overflow solution?

Maybe that will help.

Thank you, yes I have indeed tried various permutations of this.

I think the issue is that the lightbox library Cwicly is using replaces the YouTube player UI with its own, which doesn’t respect the CC button. I’d be happy to just use the YouTube UI but I’m unclear how that can be achieved.

The first video on this page uses the URL as per the Stack overflow article: https://annualreport2022.builditinternational.org/

The GLightbox library being used appears to use Plyr for video.

Plyr appears to support Closed Captions quite well (see GitHub - sampotts/plyr: A simple HTML5, YouTube and Vimeo player).

@Louis, is it possible to pass ‘captions’ in the ‘controls’ options object to enable this for YouTube videos? I can’t see a way of manipulating this through the Cwicly UI?

Hi @Graphnic,

Thank you for bringing this to our attention!

Indeed, there is currently no way to enable/disable closed captions for lightbox videos.
Rest assured, we plan to review the lightbox feature and implement this option as soon as possible.

Apologies for the inconvenience.

Maybe at some point you could add Vimeo support?

@Araminta Thanks for the confirmation. Yes, please do look at this when you can. It could be improved for sure.

For anyone facing the same problem, and needing a quick fix for video overlays, Lity seems to work flawlessly with Cwicly🙌. All you need to do is add the Lity CSS as a global style sheet, and the JS to <body> end in Settings > Custom code. You can then simply link to the video URL and add data-lity as an attribute… it then just works. Bonus, focus returns to the correct position on exit too, unlike the Cwicly lightbox.

See Lity - Lightweight, accessible and responsive lightbox