Question

这是我的CSS：

video { 
    position: absolute;
    min-height: 100%;
    height: 100%;
    z-index: -100;
    width: 980px;
    min-width: 980px;
}

这是我的HTML：

<video  playsinline autoplay muted loop>
    <source src="https://video.wixstatic.com/video/11062b_155feccf8d494b18b70adcd7716b6646/1080p/mp4/file.mp4" type="video/mp4">
</video>

我在后台使用此视频，其父级位置是相对的，宽度为980像素，但高度100％不起作用。

Answer 1

在div中换行<video>并将<video>，<div>，<body>和<html>设置为width:100%和height:100% 。它应该在边缘到边缘显示完美的视频，而不会出现任何尺寸的裁剪或失真。

<强>段

＆＃13;

html, body {
  height:100%;
  width: 100%;
  box-sizing:border-box;
  margin:0;
  padding:0;
  }
.frame {
  position:relative;
  height: 100%;
  width:100%;
}
video {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -100;
}

＆＃13;

<div class='frame'>
<video playsinline autoplay muted loop>
  <source src="https://video.wixstatic.com/video/11062b_155feccf8d494b18b70adcd7716b6646/1080p/mp4/file.mp4" type="video/mp4">
</video>
  </div>

＆＃13;

Answer 2

<div class="row" style="text-align:center">
    <video playsinline autoplay muted loop>
        <source src="https://video.wixstatic.com/video/11062b_155feccf8d494b18b70adcd7716b6646/1080p/mp4/file.mp4" type="video/mp4">
    </video>
</div>

video { 
    position: relative;
    min-height: 100%;
    height: 100%;
    z-index: -100;
    width: 980px;
    min-width: 980px;
}

Answer 3

在不知道父母的内容的情况下，以下内容适用于我。

<style>
body, video {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
<body>
  <video autoplay loop>
    <source src="https://video.wixstatic.com/video/11062b_155feccf8d494b18b70adcd7716b6646/1080p/mp4/file.mp4" type="video/mp4">
  </video>
</body>

背景视频高度不起作用

3 个答案: