video is not full screen

[kordou]

hi all
i am trying to make the video from example of image tracking into full screen.
i tried to change the video element in css to width:100vw and hight:100vh but still nothing

can somene help me on that ?

thank you

[kordou]

anyone here for answer

[r3s]

Instead of using CSS, did you try with JS? Once the video element loads, changing the width and height to match the window width and height. Not sure if that'd work because I have not tested it. But worth a try I guess. Do you have a sandbox link or something else to test?

[amcc]

This css will do it. I have given the ARView the class "ar-view" and then set the CSS as so:

.ar-view video {
  object-fit: cover;
  width: 100% !important;
  margin-left: unset !important;
}

The issue here is that the css is added to the video as an inline class, perhaps this can be altered as it makes it very hard to modify this stuff without the slightly alarming !important css addition above. Perhaps this stuff can be added as a class that can be overridden instead.

The code setting the styles that prevent the video being full screen is on line 196 here:
https://github.com/tommasoturchi/react-three-mind/blob/main/src/AR.js

However an issue here is that object-fit: cover enlarges the video to be full-screen using CSS, but this makes the AR not fit the video. So this needs to be done programatically if you want the AR to say exactly cover a picture. Very happy for someone else to jump in here and suggest a good way of doing this.