如何在html css中更改视频的高度？

Question

我必须在我的页面上显示100％宽度和400px或500px高度的视频，每当我改变视频的高度时它也会改变我不想要的宽度。我还必须显示全屏视频移动设备。

请帮帮我..

<div class="video-size">
<video  autoplay loop controls muted>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>

CSS

.video-size
{
  width: 100%;
  height: 400px;
}

Answer 1

希望这将解决宽高比问题。

HTML：

<video autoplay muted loop id="myVideo">
    <source src="videos/Raindrops.mp4" type="video/MP4">
</video>

CSS：

#myVideo {
    width: 100%;
    height: 600px;
    object-fit: cover;
    z-index: -100;
}

Answer 2

这可能会有所帮助参考：https://jsfiddle.net/gyx94wqj/

<div class="video-size">
    <video  autoplay loop controls muted>
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
   </video>
</div>

.video-size {
    height:400px;
    width:100%;
    overflow:hidden;
}
.video-size > video {
    min-width: 100%;
    min-height: 100%;
}

Answer 3

这是不可能的，因为这个css在技术上会拉伸不可能的视频。

您可以更改视频的大小，但仅限于宽高比。如果您强行更改高度，它将在顶部和底部留下空白区域。

.video-size video
{
  width: 100%;
  height: 800px;
}

我强有力地给视频高度，并看到黑色空间的例子：https://jsfiddle.net/ohk8w0s0/

Answer 4

我想你可以使用如下。

    .video-size
{
  width: 100%;
  height: 400px;
}
.video-size video{
  width:100%;
  height:100%
}

Answer 5

.video-size
{
  width: auto;
  height: 400px;
}