Css 如何使HTML5视频弹出窗口适合任何屏幕的中心？

我想让html5视频适合任何大小的屏幕，如果是iMac大屏幕或者是手机，我希望它能够响应

1如果是4:3的显示器，则应在视频上方和下方显示空格和黑条

2如果是超宽屏幕，它应该适合高度，但左右显示空白

3如果是纵向或横向位置，则与手机相同

这是我的HTML

<div class="video-container"> <!-- background darkener -->
      <video controls>
            <source src="img/vid.mp4" type="video/mp4">
       </video>
</div>

如果需要更多的实时计算，我不介意使用jQuery！ 事先谢谢

试试这个，对我有用

.video-container video {
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%; 
    background-image: url('your-video-poster.jpg');
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    z-index: 100;
}

---

根据它的用途，我建议不要使用html视频播放器，而是从其他地方嵌入，比如youtube。此外，我也不会在视频中使用弹出窗口，它会变得难以使用，降低用户体验，并且可能与较小的屏幕或手机不兼容。

.video-container video {
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%; 
    background-image: url('your-video-poster.jpg');
    background-position: center center;
    background-size: contain;
    object-fit: cover;
    z-index: 100;
}