如何使视频全宽和固定高度答案

【问题标题】：How to make a video full width and fixed height如何使视频全宽和固定高度
【发布时间】：2016-07-08 05:41:26
【问题描述】：

我想在 WordPress 中以全宽和固定高度在网页中自动播放视频。它应该类似于视频在没有任何播放器的情况下在滑块中自动播放，但只是这个视频会一次又一次地自动播放。不想使用 iframe，因为它嵌入了 YouTube 播放器，但我不需要。只想使用 CSS 和 HTML 来实现。这是我使用的代码，但它不在屏幕的整个宽度上。

 <video autoplay loop style="min-width:100%;max-width:40%">
 <source src="{video-source}" type="video/mp4" />
 </video>

【问题讨论】：

标签： html css wordpress video

【解决方案1】：

你也可以这样做。

.con{
  background-color: #000;
  min-width: 100%;
  min-height: 40%;
}
video{
  width: 50%;
  margin: 0 auto;
  display: table;
}

<div class="con">
<video autoplay loop controls>
<source src="http://3dstudioworks.com/wp-content/uploads/2016/07/video.mp4" type="video/mp4" />
</video>
</div>

【讨论】：

【解决方案2】：

试试这个 css...

video
{
  background:black;
  position:absolute;
  width:100%;
  height:100%;
}

【讨论】：

sankar 我要减小高度，当我将其固定为 40% 或其他值时，宽度会自动减小
嘿，我认为高度减少了，但它不是如何减少它的高度我给高度 10% 高度没有减少，但如果我给 px 那么宽度也会减少
我已经更新了我的代码。我将高度从 100% 降低到 40% 仍然高度没有改变，如果我在视频外部添加一个 div 并为其添加高度，那么宽度也会受到影响。
好吧...！视频保持比例，如果你把它的高度设置为小于宽度将自动减少。
让我们continue this discussion in chat。