Page MenuHomePhabricator

VideoJS beta video player captions menu does not work properly when overlapping with page header(s)
Open, Needs TriagePublic

Description

The captions menu of TimedMediaHandler's beta video player doesn't work properly when the top of it overlaps with the page header; for example, this happens on all file description pages for audio files where there are more than a few caption translations, such as File:Example.ogg. Because the six available skins have very different page headers, there are at least nine different configurations, and the captions menu does not work well with any of them.

SkinIssuesExpected behaviour
VectorWhole menu is visible but portion of the menu displayed over #mw-head cannot be interacted withWhole menu should be clickable and should not disappear when cursor is over it
MonobookPart of the menu extends above the viewable portion of the page; portion of the menu displayed over #p-personal cannot be interacted withMenu should not extend past top of the page; whole menu should be clickable and should not disappear when cursor is over it
Monobook (550px or narrower)The portion of the menu that extends outside #bodyContent is not visible and cannot be interacted withWhole menu should be visible
Cologne BlueHeader text makes some of the captions text difficult to read; portion of the menu displayed over #toplinks cannot be interacted withBackground text should not affect readability; whole menu should be clickable and should not disappear when cursor is over it
ModernPart of the menu extends above the viewable portion of the page; the portion of the menu under #pBody is not visible and cannot be interacted withMenu should not extend past top of the page; whole menu should be visible and clickable and should not disappear when cursor is over it
MinervaPart of the menu extends above the viewable portion of the pageMenu should not extend past top of the page
Minerva (desktop site)Part of the menu extends above the viewable portion of the pageMenu should not extend past top of the page
TimelessThe portion of the menu under #mw-header-container and #mw-header-hack is not visible and cannot be interacted withWhole menu should be visible
Timeless (851px to 1099px)The portion of the menu under #mw-header-nav-hack and the other header elements is not visible and cannot be interacted withWhole menu should be visible

(Minerva – and only Minerva – displays differently depending on whether or not it is used on the mobile site. Timeless has three different header configurations depending on screen width, and Monobook has two.)

The element using the CSS class vjs-menu-content currently has a maximum height of 25em. Reducing the maximum height of the menu would in itself resolve some or all of the issues (depending on the degree of reduction), but I don't think this would be a good solution:

  • Because of how much CSS can be input by users, it's very possible that an audio player could be intentionally placed arbitrarily close to the page header or could even be placed over it.
  • In any skins with floating headers like Timeless's, the same issues would occur whenever an audio player is displayed close enough to the top of the page.
  • Other skins not used on WMF sites may be customized so as to place the audio player much closer to the page header on file description pages or on other pages.

Event Timeline

Jc86035 created this task.Aug 17 2019, 12:00 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 17 2019, 12:00 PM
Jc86035 updated the task description. (Show Details)Aug 17 2019, 12:01 PM
Jc86035 updated the task description. (Show Details)
Jc86035 updated the task description. (Show Details)
Krinkle moved this task from Backlog to Video.js on the Kaltura player board.Sep 19 2019, 8:33 PM
TheDJ added a subscriber: TheDJ.Sep 26 2019, 11:56 AM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptNov 7 2019, 4:18 PM