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

【问题标题】：How to change height of the video in html css?如何更改html css中视频的高度？
【发布时间】：2018-09-15 17:47:03
【问题描述】：

每当我更改视频的高度时，我必须在我的页面上以 100% 的宽度和 400 像素或 500 像素的高度显示视频，它也会更改我不想要的宽度。而且我还必须显示全屏视频移动设备。

请帮帮我..

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

【问题讨论】：

我试过这个
如果应用width:100%并增加高度，则无法更改视频的宽高比，但顶部和底部有黑色空间
所以我们不能给出100%宽度的具体高度？
不可以，因为视频无法拉伸。是的，您可以调整视频大小，但只能调整宽高比。
Mr.Gaurav 能帮我写代码吗？请

标签： jquery html css video

【解决方案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;
}

【讨论】：

添加“object-fit:cover;”对我有用，谢谢

【解决方案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%;
}

【讨论】：

【解决方案3】：

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

您可以更改视频的大小，但只能使用纵横比。如果你强行改变高度，它会在顶部和底部留下空白。

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

我已经强制给视频高度，并查看带有黑色空格的示例：https://jsfiddle.net/ohk8w0s0/

【讨论】：

有没有办法在移动设备上全屏显示视频？
因为我有部分并且我正在使用该视频作为背景。视频中有一些文字。
这样视频将在移动设备上全屏显示，文本将显示在视频的中心

【解决方案4】：

我想你可以像下面这样使用。

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

【讨论】：

是的，你是对的，这是因为视频元素的纵横比。
但我也需要 100% 宽度。

【解决方案5】：

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

【讨论】：

这个答案是什么意思？？
对不起，我应该更清楚。您无法将宽度设置为 100%，也无法为视频设置高度。（没有边界）