Web: Comments and video player controls inaccessible due to carousel in the way

[Thinkscape]

The bug

The carousel controls seem to have higher z-index and are overlapping the video player, making it impossible to enter FULLSCREEN or use the kebab menu.
It also overlaps the image ❤️ and comments buttons, preventing users from clicking it.

---

The OS that Immich Server is running on

Ubuntu 24

Version of Immich Server

v1.103.1

Version of Immich Mobile App

1.102.2 build.151

Platform with the issue

• Server
• Web
• Mobile

Your docker-compose.yml content

n/a

Your .env content

n/a

Reproduction steps

1. Open web interface
2. Open any video
3. Try switching to full screen

Relevant log output

n/a

Additional information

No response

[Snowknight26]

Couple notes:

There are a few workarounds:

• You can enter fullscreen by double clicking the video
• Resize the browser viewport such that its aspect ratio is wider than the aspect ratio of the video, allowing you to access the controls

Aside from that, it's not really possible to style native browser video controls, so the only solution that I can think of would be to introduce a custom set of controls in lieu of browser controls such that they can be styled properly and/or be in the DOM in the correct position to apply some kind of fix.

[Thinkscape]

• You can enter fullscreen by double clicking the video

Users don't always want native full screen, and it won't work on mobile.

• Resize the browser viewport such that its aspect ratio is wider than the aspect ratio of the video, allowing you to access the controls

This is a horrible suggestion... reminds me of late S.Jobs "You're holding it wrong".
Also won't fly with mobile devices where there is no window to drag around.
Also are users expected to drag around the window changing it constantly depending on aspect ratio of different assets?

Aside from that, it's not really possible to style native browser video controls, so the only solution that I can think of would be to introduce a custom set of controls in lieu of browser controls such that they can be styled properly and/or be in the DOM in the correct position to apply some kind of fix.

We should start using proper customisable video player, like video.js, Shaka etc.
Other than that, we could modify the CSS so that the carousel controls don't overlap (assume certain video controls height).

This bug also prevents users accessing the ❤️ and comment section on photos!