How to flip the video without flipping the captions?

user_17128189 0
Viewed 71

So, I have the code below that will add a caption to the video.

video.addEventListener("loadedmetadata", () => {
        video.play();
        track = video.addTextTrack("captions", "English", "en");
        track.mode = "showing";
        track.addCue(new VTTCue(0, 100, username));
        
    });

I am rotating it to mirror the video with this css:

#video-grid > video {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    height: 300px;
    width: 400px;
}

However, the caption is also getting flipped. How can I avoid it to flip the caption or how to flip it back?

enter image description here

css html javascript
1 Answers

Just transform the text again:

#video-grid > video::cue {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
user_170554030
Related