HTML视频不占用100％的宽度

Question

我无法将video扩展到width容器的.video的100％。像this这样的内容，但仅限于视频占据max-height的{​​{1}}。

有可能吗？如果是的话，你能告诉我怎么样吗？

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;
  height: 50vh;
  width: 100%;
}

Answer 1

删除height: 50vh;中的.container .video video： （坚持这只会扭曲比例 - 毫无意义）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

视频通常使用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%;
  

• 这会自行崩溃，同时扩展。奇怪的padding-bottom值将像ceran包裹在一盘食物上。这种风格组合具有响应性，非常好 established 。

段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

此属性可以采用五个值：object-fit: contain | cover | fill | none | scale-down;使用最适合您的值。
此属性设置应如何调整替换元素（例如或

Answer 5

看起来视频具有固定的宽高比。视频不会更宽，因为它不够高。你必须增加一点高度，或者完全摆脱高度属性here

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