[BUG] Zooming in breaks the UI of the media object page in mobile devices

[charumitraravi]

Describe the bug
In a mobile browser, The zoom text option is not working as expected. The page text is not getting enlarged, and the player icons move out of visibility.

To Reproduce
1.Open an item in a mobile web browser. The item should contain a media file
2.From the browser settings, choose the zoom option (or "Zoom text" option) and start zooming in.

Expected behavior
The text should be zoomed in, and the player icons and controls should be accessible

Screenshots/Screen Recording

Private Zenhub Video

Environment (please complete the following information):

• Device / platform - Mobile
• OS: iOS,Android (need to verify)
• Browser - Chrome
• avalon-dev
• avalon-staging
• mco-staging
• mco-production
• demo

Release:
7.7

Additional notes
This scenario is working fine in the staging environment

[joncameron]

Most of the elements other than the large play button is on video.js and the way it handles zoom. The CSS for the big play button may need to be adjusted to make sure it isn't part of this issue. No media queries at the moment for the big play button we've added.

Changing to viewport dimensions rather than pixel values could fix this but may possibly affect other elements; we'll need to determine more when testing further.

[elynema]

Pinch and zoom seems to be behaving ok, text zoom is more of a problem. We assume that on mobile devices, users will be more likely to be using pinch and zoom.

Need to test pinch and zoom on iOS mobile device.

[Dananji]

I followed the same steps on the main site of VideoJS to zoom in the page, and observed similar behavior there;

And also, I tested the existing player with MediaElement.js in MCO, it zooms in the player and shows all the icons as below;

Maybe we could list this as a known issue for the time being until it is fixed in VideoJS?

[joncameron]

+1 to marking it as a known issue since it's coming from Video.js.

[elynema]

Pinch and zoom on a mobile device does not resize anything on a web page. It simply makes the whole page bigger so that you can only see a very small part of it at a time. I don't think there is anything we can change about that, but I think for accessibility purposes for a low vision user, they would be more likely to be zooming via the text size. Not completely sure, though.

Text zoom seemed to work ok in Chrome on Android (Zoom text option) - page text increased in size but player and player controls did not.

In Chrome on iPhone, text zoom increases the size of everything, including the controls in the player. Once zoomed in enough, you begin to lose buttons in the player.

The same thing happens in Safari, even at just 115% of text zoom, you lose the full-screen button:

[elynema]

Added a note to Known Issues page: https://samvera.atlassian.net/wiki/spaces/AVALON/pages/1957954635/Known+Issues