Question

我正在尝试制作一个视频填充整个窗口的宽度和高度。如果调整窗口大小，视频应调整大小。因此它甚至可能必须改变其纵横比。我在右边有滚动条，应该以某种方式删除。

到目前为止，这是我的代码：

HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <video autoplay loop id="bgvid">
        <source src="myvideo.mp4" type="video/mp4">
    </video>
</body>
</html>

CSS

video#bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

JSFIDDLE：http://jsfiddle.net/6u1krL0L/

Answer 1

要填写整个窗口，您应该确保您的视频与窗口具有相同的宽高比，这可能会非常棘手。

我认为最好的选择是确保只填充宽度或仅填充高度，然后用黑色填充背景。

尝试以下方法： HTML

<div id="wrapper">
  <video autoplay loop id="bgvid">
    <source src="myvideo.mp4" type="video/mp4" />
  </video>
</div>

CSS

#wrapper {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background-color: black;
}
video#bgvid {
  width: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

响应式HTML5视频

1 个答案: