[BUG] Vertical menus for video.js widgets can be cut off for audio recordings

[elynema]

Description

Because the media player for audio recordings is so short, video.js widgets that pop open vertically can get cut off, depending on page layout.

This mostly works ok in avalon-dev, but the vertical menus can overlay page content and are a little hard to see. The experience can also be jarring, as when I select 2x from the playback menu, it also opens the Manage nav bar element that underlies the vertical menu.

In Media Collections Online, the upper options on both the audio quality and playback speed widgets are completely cut off.

• [ ] Test Add to Playlist modal — this should lay over the media player and menu items (could be underneath if there's a popup CSS fix to change z-index)
• [ ] z-index change for nav bar in MCO to resolve local issue
• [ ] Selected an option from the playback speed menu shouldn't also create a click event for elements that are underneath

[joncameron]

MCO production issue most likely due to the Rivet framework; z-index for popup menus not explicitly set in Ramp. This could be changed in Ramp for audio. For video, Add to Playlist modal could be underneath the popup menu and we'll need to be mindful of that and test this situation.

One option for the playback speed is to click to cycle through settings, rather than mouseover to display the menu.

[Dananji]

Clicking through the playback-rate menu button to change the playback-rate was removed in VideoJS 8. Guess I hadn't tested this after I had worked on this the first time. So we should probably extend changes we make for the quality selection menu in this issue to playback-rate menu.