webRTC videoContainer overlaying everything, ignoring all styles

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


    <video id="remoteVidos" class="remote-video"
           webkit-playsinline playsinline
    <button class="close-button" ion-button icon-only clear (click)="endCall()">
        <ion-icon name="close" color="white"></ion-icon>
    <video *ngIf="!isPlatformIOS()"
    webkit-playsinline playsinline



.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;
left: 0;
height: 100%;
z-index: 99;
transition: all 1s;

please help !

Hello, did you find a workaround on this?

hi m also trying to have video calling in my app will you please share your code . m stuck in
thanks in advanced.