CSS从底部调整视频的高度而不调整视频位置

Question

我有这个HTML代码：

<div style="width:100vw;height:100vw;position:fixed">
  <video autoplay loop>
    <source src="videos/test.mp4" type="video/mp4">
  </video>
</div>

显示video罚款。现在我需要做的是将视频的height剪切为任意%，而不更改video的原始大小。

例如，这是它目前的样子

现在我需要更改一些CSS，所以现在video仅显示此部分：

如果我height说出50%元素video，它会改变video的大小，这不是我想要实现的。

此外，我的目标是动态更改此属性，以便我无法创建两个div或类似的东西。

任何解决方案？

Answer 1

您可以使用padding-bottom来预测＆＃34;假冒＆＃34; height使其响应

＆＃13;

＆＃13;

body {
  margin: 0
}
.container {
  position: relative;
  /* 16/9 AR */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

＆＃13;

<div class="container">
  <iframe src="http://www.youtube.com/embed/QILiHiTD3uc" frameborder='0' allowfullscreen></iframe>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我的解决方案： here

    <div class="container">
        <div class="videoWrapper">
            <video autoplay src="http://html5demos.com/assets/dizzy.mp4"></video>
        </div>
    </div>

.container {
    width: 100vw;
    height: 100vh;
}

.videoWrapper {
    width: 100vw;
    height: 50vh;
    overflow: hidden;
}

video {
    width: 100vw;
    height: 100vh;
}

Answer 3

您可以简单地使用CSS属性 object-fit：cover

然后将包装容器设置为所需的大小。