[BUG] media player is not re-sizing to width of browser

[elynema]

Description

For both audio and video items, the media player is not re-sizing to the width of the browser on the playlist page. This requires the user to scroll the browser horizontally in order to access all the widgets. So far, this has been observed in Safari on iPhone as well as Chrome on desktop (when the browser is resized down). This is happening even when the browser is not zoomed at all and is happening for both audio and video on both playlist and media item pages.

Done Looks Like

• Media player resizes to fit the entire width, including components, to within the browser viewport width
• Test zoom levels and investigate resizing strategy to determine where to make changes
• There is enough space to accommodate the popup menu for the playback speed widget.

[joncameron]

Min height and width of player set during previous work; these changes may be triggering this issue.

[Dananji]

I was not able to reproduce this issue for Chrome on both my machine and BrowserStack for desktop. The browser wouldn't let me reduce the width to be less than the width of the bootstrap column containing the player.

[elynema]

Tested this morning and I also was not able to reproduce this specific issue in Chrome or Safari today. However, I am seeing an overlap issue in what is probably tablet mode in both Chrome and Safari.

[elynema]

@Dananji Chrome and Safari on desktop is working fine for me now for both issues reported above, but the video player is still overflowing the page horizontally in Safari on iPhone in Browserstack.

[Dananji]

@elynema Latest changes from the Ramp build were not deployed properly in avalon-dev, so it was still on the older CSS. Chris re-compiled them, and now latest CSS changes are in place in avalon-dev.

[elynema]

@Dananji This is looking good on iPhone, but Android is still overflowing. I see you have #696 that isn't merged yet - is that a resolution to this issue?

[elynema]

Tested and working fine on Chrome and Safari on desktop

@Dananji Two issues:

1. Still having overflow on Android just like before. I'm guessing Extend player min-width to Android browsers #696 did not get included in the new Ramp build in Avalon-dev.
2. Tested zoom on iPhone (iOS 18) using the Safari browser Zoom setting to 200%. The video player is way too wide for the screen in this context. See screenshot:

[Dananji]

The change for Android is included in the latest build of Ramp in Avalon, but the assets didn't compile and deploy in avalon-dev properly. I mentioned it to Chris and he will look into it: https://samvera.slack.com/archives/G2E762545/p1730839476879059?thread_ts=1730835289.531579&cid=G2E762545. Once this is resolved this can be tested again in Android.

I will look into the zoom issue in iPhone.

[Dananji]

We set a minimum width to the player in iOS and Android devices to 380px, which Ramp sticks with on zoom. This is to keep all player control icons on-screen when zooming in.

I can reduce this width to a lower value (~320px). Reducing it all the way to fit device width will result in the same issue we've seen before, where some of the player controls gets hidden.

@elynema What do you think about reducing the minimum width of the player just enough to contain all the player controls? This value is around 320px. Or if there's anything else we can try, please let me know.

[elynema]

@Dananji I thought moving the progress bar up above was to allow us to zoom up to 200%?

If we set a min width, then users might not be able to actually see the full content that's playing if they are zoomed, right?

[Dananji]

I thought moving the progress bar up above was to allow us to zoom up to 200%?

No, it doesn't allow us to keep the player width fit to device width on 200% zoom. Moving the progress-bar above the controls helps us to interact with it on 200% zoom easily, because it doesn't get squished among the other controls.

In order to find a solution to this I tested the following sites on 200% zoom on iPhone;

1. VideoJS site: in the first instance it reduces the player width to fit the device width, in the second instance keeps a fix width while the player goes out of page boundaries.

2. LinkedInLearning: zooms in the player and its controls keeping the player's width fit to device width, while some controls disappear.

3. YouTube on Safari: squishes all the controls on top of video while keeping the player width stick to the device width.
   

4. Vimeo: player width is kept the same as the device width while collapsing all the controls to the side. I couldn't find the progress-bar to scrub/seek on 200% on this player.

Looking at these examples, maybe we can discuss and come up with a solution to this issue?

If we set a min width, then users might not be able to actually see the full content that's playing if they are zoomed, right?

Yes, this is an issue with zooming in to 200% on portrait mode with this solution.

One potential solution for this could be to aggregate the controls into a single setting menu on mobile devices in the future?

[joncameron]

No ability to identify zoom level in the browser within JS is also a difficulty with some of these methods.

[elynema]

Width is looking ok on Android, now.

Stick with our current solution for 200% Zoom, which was developed as #596. Jon will create a new issue to investigate if we can develop a solution more like Vimeo, where controls are migrated into a joint panel behind a single config button when zoom goes up.