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

Question

我想让 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>

CSS:

.video-container {
   position: fixed; 
   top: 0; left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.9);
}

.video-container video {
  /* Here is what I want to know how to make it fit the way we want */
}

如果需要更多实时计算，我不介意使用 jQuery!提前致谢

Answer 1

试试这个，对我有用

.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;
}