video format camera not working properly on iphone - css

Question

In nuxtjs I developed a simple camera without plugin. On notebook and android phones it works, but on iphone not correctly.
The problem is that on the iphone the css I inserted does not disable the pointer-events and the controls, that is, you can open the video and it should work statically, without the controls.
Could someone tell me what's missing?
<div class="takePhoto__camera">
<video ref="video" muted></video>
<img class="takePhoto__camera__filter" src="../../assets/images/filtro.png" ref="filter" alt="Filtro">
<button class="takePhoto__camera__btn" #click.prevent="photoTaken"></button>
</div>
<script>
import { mapMutations } from "vuex"
export default {
name: "ComponentCameraVideo",
data(){
return{
video: null,
}
},
mounted(){
this.video = this.$refs.video;
this.init();
},
methods: {
...mapMutations(["SET_VIDEO"]),
init(){
if('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices){
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {
this.video.srcObject = stream;
this.video.play();
}).catch((error) => {
console.log(error)
alert(error);
})
}
else{
alert("Não foi possível acessar a câmera!");
}
},
photoTaken(){
this.SET_VIDEO([this.video, this.$refs.filter]);
this.$emit("photoTaken");
}
},
}
</script>
&__camera{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(0, 0, 0);
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
z-index: 999999;
video{
width: 100%;
pointer-events: none;
height: 100%;
&::-webkit-media-controls,
&::-webkit-media-controls-enclosure,
&::-webkit-media-controls-timeline,
&::-webkit-full-screen {
display:none !important;
}
}
button{
width: 75px;
height: 75px;
display: block;
background-color: #fff;
border: 2px solid $dark_green;
border-radius: 50%;
box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
z-index: 99;
&:hover{
box-shadow: 0 1px 5px rgba(0, 0, 0, 1);
}
}
&__filter{
height: 100%;
pointer-events: none;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9;
}
}
The project link for you to test if necessary.
https://torcida.petronas.com.br/