HTML 视频不占100%宽度

Question

我无法让 video 缩放到 .video 容器的 width 的 100%。类似 this 的东西，但只有视频占用 50vh 的 max-height。

可以吗？如果是的话，能告诉我怎么做吗？

body {
  margin: 0;
}

.container {
  height: 100vh;
  position: relative;
}
.container .video {
  position: absolute;
  height: 50vh;
  width: 100%;
}
.container .video video {
  position: absolute;
  top: 0;
  left: 0;
  height: 50vh;
  width: 100%;
}

<div class="container">
  <div class="video">
    <video muted autoplay loop>
      <source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">
    </video>
  </div>
</div>

Answer 1

从 .container .video video 中删除 height: 50vh;：（坚持只会扭曲比例 - 没有意义）

body {
  margin: 0;
}

.container {
  height: 100vh;
  position: relative;
}
.container .video {
  position: absolute;
  height: 50vh;
  width: 100%;
}
.container .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="container">
  <div class="video">
    <video muted autoplay loop>
      <source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">
    </video>
  </div>
</div>

Answer 2

您可以将 html,body 设置为 height:100%，将 video 设置为 height:50%，将 width:100%

body,
html {
  margin: 0;
  height: 100%
}
.container video {
  height: 50%;
  width: 100%;
}

<div class="container">
  <video muted autoplay loop>
    <source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">
  </video>
</div>
<div class="content">


  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan nisi eget semper consequat. Pellentesque sed vulputate enim. Aenean condimentum dolor eu porttitor feugiat. Sed nec arcu maximus nulla scelerisque hendrerit ac in turpis. Lorem ipsum
  dolor sit amet, consectetur adipiscing elit. Etiam vitae semper odio. Aliquam consequat porttitor sapien, at luctus diam euismod eget. Vestibulum eleifend fringilla massa, nec bibendum nisl congue eu. Nulla mattis mi eu neque efficitur luctus. Praesent
  vulputate, orci ornare consectetur consequat, eros ante ultrices urna, quis dictum urna justo at quam.
</div>

Answer 3

视频的宽高比似乎是固定的。视频不会变宽，因为它不够高。你必须增加一点高度，或者像我所做的那样完全去掉高度属性 here

.container .video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

Answer 4

视频通常使用 16:9 的 AR（宽高比）编码（16 宽比 9 高）。

将视频元素设置为：

  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;

这应该可以使其达到最大长度

然后将其应用于容器：

    position: relative;
    height: 0;
    width: 100%;
    padding-bottom:56.25%;

这会自己折叠，同时展开。 strangepadding-bottom 值就像 ceran 包裹在一盘食物上。这种样式组合响应迅速且非常好 established.

片段

body {
  margin: 0;
}

.container {
  height: 100vh;
  position: relative;
}
.container .video {
  position: absolute;
  height: 0;
  width: 100%;
  padding-bottom:56.25%;
}
.container .video video {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
}

<div class="container">
  <div class="video">
    <video muted autoplay loop>
      <source src="http://res.cloudinary.com/dlm2jcfic/video/upload/v1465860427/343732582_johq2x.mp4" type="video/mp4">
    </video>
  </div>
</div>

Answer 5

您可以简单地使用 CSS 的 object-fit 属性和值 cover 以及 width:100%;。

这个属性可以取五个值： object-fit: contain | cover | fill | none | scale-down; 使用最适合你的值。
属性设置替换元素（例如或

HTML 视频不占100%宽度

HTML Video does not occupy 100% width

html

css

html5-video

片段