webRTC videoContainer overlaying everything, ignoring all styles


#1

Hi all !

videoContainer - must take all size of the screen from top to bottom, but only takes about 74-75% of the screen, which is only visible on the device, not in browser or emulator

on IOS particularly
close-button - also a button that must be overlaying the video but it’s no visible, even though i can tap it

Fill content container this didn’t work, inline styles didn’t work, positition:fixed didn’t work

HTML

    <video id="remoteVidos" class="remote-video"
           autoplay="true"
           *ngIf="callService.remoteVideo"
           webkit-playsinline playsinline
           [src]="callService.remoteVideo">
    </video>
    <button class="close-button" ion-button icon-only clear (click)="endCall()">
        <ion-icon name="close" color="white"></ion-icon>
    </button>
    <video *ngIf="!isPlatformIOS()"
    #localVideo
    class="local-video"
    id="videoLocal"
    webkit-playsinline playsinline
    autoplay="true">
    </video>

  
</div>

CSS

.close-button {
position: absolute;
z-index: -1;
right: 0;
top: 10px;
opacity: 1;
}

.local-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
object-fit: fill;
visibility: visible;
pointer-events: none;
opacity: 1;
}
#videoContainer {
font-size: 0;
position: fixed;
width: 100vw;
top:0;
left: 0;
height: 100%;
z-index: 99;
transition: all 1s;
}

please help !


#2

Hello, did you find a workaround on this?