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 !