html - 100% 宽度和固定高度的背景视频

Question

我需要在后台运行视频。要求是视频必须在 100% 宽度和 600 像素高度/最大高度上运行。这是我尝试做的。

https://jsfiddle.net/yydkd5t4/1/

HTML

<video autoplay loop muted id="video-bg">

<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">

</video>

CSS

#video-bg {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {display: block;}

我面临的问题是，当我尝试固定高度时，它也会缩小宽度。我的问题的任何解决方案将不胜感激。

Answer 1

在理解了你想要达到的目标之后......

您需要向视频添加一个父 div。否则它会保持宽高比，你无法实现你想要的。

#video-bg {
  position: relative;
  width: auto;
  min-width: 100%;
  height: auto;
  background: transparent url(video-bg.jpg) no-repeat;
  background-size: cover;
}
video {
  display: block;
}
.video-container {
  width: 100%;
  max-height: 600px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -100;
}

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
<div class="video-container">
  <video autoplay loop muted id="video-bg">

    <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4" />

  </video>
</div>

您当前的代码或到目前为止的任何答案的问题是它不会保持 height: 600px 因为视频将始终保持他的纵横比。

因此，您添加一个 width: 100% 的父级 div 和一个 overflow:hidden 的 max-height:600px 。这样，如果视频获得更大的高度，它将被父 div 隐藏。

这可能是实现您想要的效果的最佳方式，但请记住，它会隐藏视频的某些部分。