Question

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

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。否则它将保持宽高比，你无法达到你想要的效果。

＆＃13;

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

＆＃13;

<!--[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>

＆＃13;

您当前的代码或任何答案的问题是，它不会维持height: 600px，因为视频将始终保持其宽高比。

因此，您添加了div的父width: 100%和max-height:600px的{{1}}。这样，如果视频的高度更高，它将被父overflow:hidden隐藏。

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

Answer 2

以下是jsfiddle

的更新代码

请注意，我已将min-height: 100%;更改为min-height: 600px;并添加了top: 0;

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

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

2 个答案: