Support 200% zoom in media player on mobile devices

[elynema]

Description

For accessibility purposes, it is recommended to support up to 200% zoom (see WCAG criterion 1.4.4). Although this criterion specifically mentions resizability of text, it makes sense that controls also need to be available at 200% zoom.

Using 200% zoom in the browser, we find that controls are lost from Ramp's media player element on mobile devices in both Safari and Chrome.

Potential solutions:

• keep a fixed width for player and require scrolling (not optimal)
• hide player controls behind some kind of widget that can expand
• wrap player controls to a second row
• don't expand the size of player controls when text is re-sized (not sure if this follow WCAG appropriately)

Done Looks Like

• [ ] Test behavior across platforms (Android zoom is different than iOS)
• [ ] Investigate ways to retain elements on screen at appropriate sizes when at high zoom levels
• [ ] Fix things while investigating as needed
• [ ] Player icons are always populated in order (previous button, play/pause button, next button, current time, duration display, volume bar, captions button, track scrubber button, quality selector icon, playback rate button, full-screen toggle) when switching between canvases.

200% zoom in Safari on iPhone 15 (not a mini):

200% zoom (4 notches larger) in Chrome on iPhone 15 (not a mini):

200% zoom (4 notches larger) in Chrome on Galaxy s24:

[elynema]

This problem is potentially less critical on iPhones, as the user only needs to be able to click play, and then controls are accessible from the native player?

[elynema]

Youtube does not solve this problem very elegantly in Chrome on iPhone.

[Dananji]

I think we can do the following easily to support 200% zoom all supported viewports;

1. Move progress bar to the top of controls: One of the non-UX friendly things with the current interface when zoomed in is the progress bar getting smaller with zoom-in and making scrubbing harder. For this we can move progress bar to the top of the controls like below;

This allows us a little bit more space for other controls when zooming in.

2. Keep a fixed width to the player after a certain point (number 1 in potential solutions): I tested YouTube on desktop browsers at 200% zoom and beyond. I observed that, after the player reaches a certain width it doesn't adjust the size of the controls. Instead it keeps a fixed width to the player and enable horizontal page scroll. This is helpful, because one of the issues with zooming in Ramp is controls getting hidden and in-accessible after a certain point. I think this might be easier than consolidating icons into a widget (at least for a first-pass), which I haven't been able to figure out yet.

[joncameron]

Looks good!