Question

我正在使用html5视频显示我正在建设的网站的背景视频。我希望它能够填满整个屏幕并做出响应，但底部似乎存在差距。

＆＃13;

 .video {
      position:absolute;
      height:100% !important;
      width:100%;
      top:0;
      right: 0;
      left:0;
      bottom:0;
 }
 video{
      position:absolute;
      width:100% !important;
      max-height: 100% !important;
      background-size: cover;
 }

＆＃13;

<div class="video" >
    <video autoplay loop poster="../img/grazing.jpg" class="fillWidth">
        <source src="../videos/CowType.webm"
        type='video/webm;codecs="vp8, vorbis"'/>
        <source src="../videos/CowType.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    </video>
</div>

＆＃13;

以下是该网站的链接：http://capelos.gonzbergagency.com/prime.html

Answer 1

试试此视频的CSS

video{
  position: fixed; 
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  background-size: cover;
}

请务必从现有的视频CSS中删除它

video{
  width: 100% !important; 
  max-height: 100% !important; 
}

Answer 2

这就是你需要的：

html,
body,
div,
video {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

.video {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

带HTML5的全屏幕背景视频

2 个答案: