So ändern Sie den Y-Wert der CSS-Objektposition dynamisch ⇐ CSS

[Guest]

HTML-Neuling hier, ich habe kürzlich drei Kamerawinkel eines einstündigen Familienereignisses aufgenommen, die Clips synchronisiert, sie auf genau die gleiche Länge zugeschnitten, sie sind alle 720p 25fps, und ich habe sie vertikal zu einem einzigen MP4 mit 1280x2160 25fps gestapelt Das wird auf einem von mir eingerichteten Webserver abgelegt. Meine Absicht ist es, mithilfe des CSS-Objektpositions-Y-Werts zwischen verschiedenen Kamerawinkeln zu wechseln. Das funktioniert wie erwartet, wenn ich den Y-Wert explizit im CSS festlege, aber ich möchte 3 Schaltflächen hinzufügen, die den Y-Wert dynamisch über onClick ändern können.

Code: Select all

object-position: 0px 0px;

Der 2. Wert muss -720px oder -1440px sein, um den 2. und 3. Teil des Videos anzuzeigen. Wie könnte ich diese Werte also einfach mit OnClick mit a anwenden? button?
Ich habe versucht, eine Variable zu definieren, die Variable an der Objektposition zu platzieren und den Wert mit onClick und .innerHTML zu ändern

Code: Select all

:root { --camposition: 0; }

Code: Select all

Guests

Vielen Dank im Voraus für jede Hilfe, googeln war ein tiefer Tauchgang, daher habe ich mich an die wunderbare Stack-Overflow-Community gewandt