Captions with formatting can produce nested spans

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).

[sampotts]

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

[sampotts]

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