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

Question

我需要在后台运行一个视频.要求视频必须在100%宽度和600px高度/最大高度上运行.这是我试图做的.

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因为视频将始终保持他的宽高比.

所以,你加一个家长div带width: 100%和max-height:600px带overflow:hidden.这样,如果视频获得更大的高度,它将被父级隐藏div.

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