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: