[BUG] Captions display over top of progress bar

[elynema]

Describe the bug
With the new multi-line progress bar + video.js widget display, multi-line captions are overlapping the progress bar. The captions should not overlap the progress bar.

To Reproduce
Steps to reproduce the behavior:

1. Go to a record in avalon-dev with captions: https://avalon-dev.dlib.indiana.edu/media_objects/37720c78r/section/cv43nw85w
2. Begin playback with captions turned on
3. You will see the captions overlap the progress bar once there is a multi-line caption.

Expected behavior
The captions should display above the progress bar. Note: LinkedIn Learning uses video.js as well, and they have the captions move up (when the progress bar / widgets are visible) and down (when the progress bar and widgets disappear). This would be a cool solution.

This has not been tested on mobile devices, so not sure if it will work differently there.

Screenshots
Current display in Avalon:

Screen.Recording.2024-10-08.at.3.50.10.PM.mov

LinkedIn example:

Screen.Recording.2024-10-08.at.3.47.15.PM.mov

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 129.0.6668.70

QA

• Test caption display and progress bar on Chrome desktop, Safari on iPhone/iPad, and Chrome on Android

[joncameron]

Could be a CSS change; VideoJS also has options that could be used for this purpose. JS-based approach could be better across platforms.