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

如何制作HTML5视频弹出窗口以适应任何屏幕的中心？

1 个答案: