使用 HTML5 的全屏背景视频

Posted 2023-05-07

【中文标题】使用 HTML5 的全屏背景视频

【英文标题】：Full screen background video with HTML5

【发布时间】：2015-04-02 00:13:05

【问题描述】：

我正在使用 html5 视频来显示我正在构建的网站的背景视频。我希望它填满整个屏幕并做出响应，但底部似乎有一个空隙。

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

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

这里是网站的链接：http://capelos.gonzbergagency.com/prime.html

【问题讨论】：

在我的屏幕上看起来像你想要的那样，当我访问capelos.gonzbergagency.com时，视频是整页并且底部没有间隙

抱歉链接错误。它应该是：capelos.gonzbergagency.com/prime.html

链接已损坏。

【参考方案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; 

【讨论】：

谢谢，但没有这样做。它填满了屏幕，但不能正确缩放。

【参考方案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%);