I see. I can reproduce the issue with the CSS you provided. Unfortunately, I think this is just an issue with how image maps are designed in HTML and didn’t realize it before since I generally don’t use them.
I did some searching and found other people who ran into similar issues. Most of them (who got to a solution) seemed to workaround it by using JS to recompute the coordinates as needed – e.g. using https://github.com/jamietre/ImageMapster or other libraries.
I think you could also accomplish it with an SVG. (e.g. this result came up in a search)
I’ve been trying to figure out a related sort of video streaming setup for work (without Owncast, but with a similar sort of 24/7 goal plus other considerations) and have been looking into using ffmpeg’s capabilities to output either HLS or DASH segments + manifests. (FFMPEG can do both but I don’t know which would be better for my needs yet.) The sources I’m working with are RTSP/RTP instead of RTMP and I only need streaming to browser clients currently – although it working with VLC naturally by pointing it to the manifest is nice.
HLS and DASH work by having videos split into small chunks that can be downloaded over HTTP, so just replacing the manifest allows for continuous streaming (the client pulls it repeatedly) without the server needing to maintain a continuous connection to the client.(Fan out to CDNs works naturally since the video chunks are just files that can be served by any web server.)
It should be possible to do some creative things by either creating / modifying the manifests myself with scripting or by piping chunks into another instance of ffmpeg from a script. (I’ve done something similar using
-f image2pipe
in the past, but that was for cases where I need to do things like create a video from an image gallery dynamically.) That’s as far as I’ve gotten with it myself though.I don’t know what the right answer is either, but I’m also interested in finding out and hopeful you get additional responses.