100％宽和固定高度的背景视频 [英] Background video with 100% width and fixed height

问题描述

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

I need to run a video in the background. Requirements are that the video will have to run on 100% width and 600px height/max-height. Here is what i tried to do.

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

面对的是，当我尝试修正高度，它也缩小宽度。任何解决我的问题将非常感激。

The issue what i am facing is that when i try to fix the height it also scale down the width. Any solution to my problem will highly be appreciated.

推荐答案

了解您想达到的目标后...

After understanding what you are trying to achieve...

您需要向视频添加父 div 。否则它将保持宽高比，你不能实现你想要的。

You need to add a parent div to the video. Else it will maintain the aspect-ratio and you can't achieve what you want.

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

The problem with your current code or any answers till now is that it won't maintain the height: 600px because the video will always maintain his aspect-ratio.

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

So, you add a parent div with width: 100% and a max-height:600px with overflow:hidden. This way if the video gets a bigger height it will be hidden by the parent div.

这可能是最好的方式来实现你想要的，但记住它会隐藏视频的一些部分。

This is probably the best way to achieve what you want, but keep in mind it will hide some parts of the video.

这篇关于100％宽和固定高度的背景视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！