在宽屏上显示高视频时居中 webrtc 视频流内容答案

【问题标题】：center webrtc video stream content when displaying tall video on wide screen在宽屏上显示高视频时居中 webrtc 视频流内容
【发布时间】：2016-10-20 15:22:33
【问题描述】：

我正在手机和笔记本电脑之间进行 webrtc 视频通话，手机处于纵向模式，因此它发送高度大于宽度的流，而笔记本电脑发送的流的宽高比相反。

我希望视频全屏显示，我使用了以下 css：

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%;

这使得视频全屏，但视频只显示流的顶部，其余部分被切断，js，css中有没有办法让视频显示流的中心部分流并切掉边缘， 就像它在 Apprtc 参考应用程序中的发生方式一样。

谢谢。

【问题讨论】：

怎么截断的？上面还有其他元素吗？这可能是导致麻烦的不同元素的 CSS 规则。一般来说，它应该适用于object-fit: contain、as seen here。
屏幕的纵横比是16:9，流的纵横比是9:16，基本上我是想在一个非常宽的屏幕上显示一个非常高的视频，视频只显示全屏实际流的顶部，object-fit:contain 似乎不起作用，顶部没有其他元素
我用垂直视频更新了我的示例。即使屏幕非常宽，它也会缩放视频并将其居中，就像background-size: cover;。你能分享更多的 CSS 或 HTML 吗？屏幕截图也可能有所帮助。
谢谢，我会尝试并回复您。
谢谢@FabianSchultz，我的 css 错了，我不得不使用 object-fit:cover，并且不得不增加父 div 的大小。

标签： javascript html css html5-video webrtc

【解决方案1】：

无需做太多事情即可使您的视频居中。只需在显示容器上使用object-fit: cover;（大多数现代浏览器都支持），一切都会自动为您完成。

【讨论】：

请注意，这不适用于任何版本的 IE。对于 WebRTC 来说不是问题，因为他们甚至不支持这一点。 caniuse.com/#feat=object-fit
@FabianSchultz 评论解决了这个问题，这是由于我使用了不正确的 css，因为他没有提供答案，我会接受你的。