center webrtc video stream content when displaying tall video on wide screen
<p>I am making a webrtc video call between a mobile and laptop, the mobile is in portrait mode, so it sends the stream with the height greater than width,  and the laptop send the stream with the aspect ratio reversed.</p>

<p>I want the video to be displayed full screen for which i have used the following css: </p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>position:fixed;
left:0;
top:0;
right:0;
bottom:0;
object-fit:contain;
object-position:50% 50%;
minHeight:100%;
minWidth:100%;
height:100%;
width:100%;</code></pre>
</div>
</div>
</p>

<p>That makes the video fullscreen but the video displays only the top portion of the stream, the rest is cut off, <strong>Is there a way in js, css to make it so that the video displays the center portion of the stream and cuts out edges,</strong> Like how it occurs in the <a href="https://appr.tc/" rel="nofollow" title="Apprtc">Apprtc</a> reference app.</p>

<p>Thank you.</p>