Using
Minimal, the video controls are often inaccessible on a variety of devices. This test album was made with video resolution of 1080p. The first video is actually only 720p, so it doesn't get any larger than that. The second video really is a 1080p. The image bounds are set to 2000x2000.
https://jefftucker.jalbum.net/minvid/
When viewing the first video, the controls are still accessible on most devices, but not on a typical small-to-midsized phone (like my S7, or an iPhone SE), with a 360x640 screen.
When viewing the second video, the controls are not reachable on almost any device, even a 1920x1080 monitor.
Setting the video resolution down to 720p takes care of the problem for most devices, but the non-huge phones still run into it. In similar fashion, choosing smaller image bounds helps, but to take care of the phones, you need to get down to "stupid small" image bounds. And setting the video resolution to 480p takes care of all devices, but results in videos that are ridiculously small on a typical desktop monitor.
I know why this is happening. The slide page in
Minimal isn't truly responsive - it just relies on CSS to make the image or video narrower. An image has a native aspect ratio, so it also gets shorter when that happens, and things are mostly OK. But the <video> frame doesn't have a native aspect ratio (the video itself does, but the frame doesn't). When it gets narrower, it remains just as tall as it was. Since the video controls are pinned to the bottom of the frame, they get pushed off the bottom of the display.
What's the solution? The skin could detect when the viewport is shorter than the video itself, and reduce the height of the <video> frame. Or, the page could set
overflow-y:auto;, which would at least let the visitor scroll down to get to the controls.
Edited by: JeffTucker on 5 Apr 2022, 10:44 - typo