How to change CSS object-position Y value dynamically

HTML newb here, I recently recorded 3 camera angles of an hour long family event, synced the clips, trimmed them to the exact same length, they’re all 720p 25fps, and I stacked them vertically into a single 1280×2160 25fps MP4 that will be put on a web server I’ve setup. My intent is to switch between different camera angles using CSS object-position Y value. That works as expected when I set the Y value explicitly in the CSS,but I would like to add 3 buttons that can dynamically change the Y value via onClick.

object-position: 0px 0px;

The 2nd value needs to be -720px, or -1440px to show the 2nd and 3rd parts of the video, so how could I simply apply those values using OnClick with a button?

I tried to define a variable, place the variable in object-position, and change the value using onClick and .innerHTML

:root { --camposition: 0; }

<button type="button" onClick="document.getElementById('--camposition').innerHTML='-720px';">Guests</button>

Thanks in advance for any help, googling was a deeeeep dive, hence my reaching out to the wonderful stack overflow community 🙂