Taken from Stack Overflow, it's impossible to apply transforms to a fullscreened element. However, we can add a parent element to a video, fullscreen that element, and apply the transformation to the child video. I don't know if there's a performance penalty.

This has some drawbacks, though.

On Firefox 84 the controls are shown reversed until the mouse hovers the video, then they are flipped and rendered correctly;
On Chrome 87 the controls are flipped.

Below is a working example. I think the controls issue can be dealed with if we use custom controls or manipulate the shadow DOM, but that would require mastery and cross-browser testing.

A thought: if any element can be full-screened, we could full-screen the parent of all the videos and have a nice uncluttered view of all the videos.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Video</title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>By default, the gray noise is on bottom right. If it is on the bottom left, the video is mirrored.</p>
        <button id="fullscreen">Fullscreen</button>
        <label for="mirror"><input type="checkbox" name="mirror" id="mirror" autocomplete="off">Mirror</label>
        <div id="container">
            <video id="video" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls></video>
        </div>
        <script>
         let btn = document.getElementById("fullscreen");
         let box = document.getElementById("mirror");
         let container = document.getElementById("container");

         btn.onclick = function(e) {
             e.preventDefault();
             container.requestFullscreen();
         };
         box.onchange = function(e) {
             video.style.transform = box.checked ? "scaleX(-1)" : null;
         };
         document.onfullscreenchange = function(e) {
             if(document.fullscreenElement) { /* entering */
                 video.style.width = "100%";
                 video.style.height = "100%";
                 video.style["object-fit"] = "contain";
             } else { /* exiting */
                 video.style.width = null;
                 video.style.height = null;
                 video.style["object-fit"] = "inherit";
             }
         };
        </script>
    </body>
</html>

full screen reverses the webcam #4

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions