Plyr: Captions with formatting can produce nested spans

[friday]

The getCueAsHTML() method converts cue markup to html. For example:

<v John Green>The human tongue is like <i.foreignphrase><lang ja>wasabi</lang></i>: it's very powerful, and should be used sparingly</v>

This will be converted to:

<span title="John Green">The human tongue is like <i class="foreignphrase"><span lang="ja">wasabi</span></i>: it's very powerful, and should be used sparingly</span>

<span> can be added for metadata, but since Plyr uses span for styling the cue directly this causes issues.

(Opacity has been increased to better illustrate the issue)

It happens in both Chrome and Firefox (haven't tested it in any other browser).

[friday]

Proposed solution:

Add a more specific selector for captions (or strip the html, but it's perhaps better as an option).

[sampotts]

Yeah I think we'd just need to add a > child combinator.

[friday]

That should work fine too.

[sampotts]

An additional selector would be cleaner though I suppose. plyr__caption or something.

[friday]

I'll fix this after #1000. Already have some other related changes locally.

[sampotts]

👍