Question

我有一个小问题。我有一个视频，我想调整到浏览器，它不应该伸展，但也不应该有空间可见

HTML：

<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>

CSS：

#wereldbol {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background-size:cover;
}

background-size: cover;导致视频偏离中心的问题，是否有其他方法可以覆盖浏览器的全宽和高度？目前width: 100%和height: 100%并未完全解决问题，因为只要视频正确缩放，左边和右边的图像都会留下白条。有没有办法解决这个问题？

Answer 1

如果我理解正确，那么您要实现的目标是保持视频的宽高比，但要使其适应周围环境而不会使视频不成比例地延伸。我是这样做的：

将视频元素包装在div中，如下所示：

<div class="video-wrapper">
    <video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
</div>

然后使用以下CSS：

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 0;
  padding: 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
  overflow: hidden;
  border: 0;
}

.video-wrapper video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

编辑：这是plunker：调整视口宽度以查看其工作原理。

Answer 2

您需要使用"aspect ratio trick"调整CSS以适合确切的宽高比，或者使用类似FitVids.js的内容 - 请参阅http://fitvidsjs.com/

视频宽度无法正确缩放

HTML：

CSS：

2 个答案: