Question

我想让我的网站播放一个占据整个视口的视频。不是身体的100％，只是视口。因此，您可以向下滚动并查看其他内容。类似于mediaboom.com的做法。

我设法让视频占据了整个视口（而不是更多），这正是我的目标。但它没有响应。这意味着在调整窗口大小时视频应保持居中。但它被切断了。

到目前为止，这是我对html的看法：

<div id="featured">
        <video poster="assets/poster.jpg" autoplay="true" muted="true" loop>
            <source src="assets/home.mp4" type="video/mp4" />
        </video>
</div>

和css：

body, html {
margin: 0px;
padding: 0px;
}

#featured {

max-height: 100vh;
overflow: hidden;
text-align: center;
}


video {
    min-width: 100%;
    min-height: 100%;

}

Answer 1

与object-fit: fill/cover不同，这个也适用于IE / Edge

Fiddle demo

＆＃13;

html, body {
  margin: 0;
}
#wrapper{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
#featured {
  position: absolute;
  width: calc(100vh * (1000 / 562));    /*  video width / height  */
  height: calc(100vw * (562 / 1000));   /*  video height / width  */
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<div id="wrapper">
  <div id="featured">
    <video poster="assets/poster.jpg" autoplay="true" muted="true" loop>
      <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" />
    </video>
  </div>
</div>

＆＃13;

Answer 2

您可以在CSS中使用object-fit：cover，只有catch是没有IE支持。它实际上与背景大小相同：封面！ https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 3

我不确定我是否正确地提出了您的问题，但我尝试了更改最小宽度的代码：100％;和最小高度：100％;宽度：100％;和身高：100％;并且窗口正确调整大小。

编辑：

我很抱歉，但我不知道在mediaboom.com上哪里可以找到很多东西。

但如果你想：

保持视频的宽高比。
让视频与视口一样高。
根据需要裁剪视频的宽度，但保持视频居中
通过滚动

然后尝试这个。如果它不是解决方案，它可能会让你更接近：

body, html {
            margin: 0px;
            padding: 0px;
            width: 100%;
        }

        #featured {
            width: 100wh;
            height: 100vh;
            position: relative;
        }


        video {
            width:100wh;
            height: 100Vh;
            display:inline-block;
            position: absolute;
            top:50%;
            left:50%;
            margin-right: -50%;
            transform: translate(-50%,-50%);
        }

如何让视频占据视口的高度和宽度？

3 个答案: