Question

我正在尝试将所有浏览器（包括IE）的视频背景调整为合适的大小，而不用对其进行缩放。这是我的网站网址：-https://my-developement.myshopify.com/

它可用于大多数具有CSS属性object-fit: cover的浏览器，但IE不支持此属性。

请分享您对该问题的看法。

Answer 1

巧妙地组合了vw / vh个单位，position和transform

.bg {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  z-index: -1;
  top: 0;
  left: 0;
}

video {
  width: 100vw;
  height: 100vh;
  min-height: calc(100vw * 9 / 16);
  min-width: calc(100vh * 16 / 9);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

body {
  margin: 0;
  font-family: sans-serif;
  font-size: 62.5%;
}

.foreground {
  margin: 30px auto;
  width: 60%;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 20px;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
}

<div class="bg">
  <video src="https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4" autoplay muted loop></video>
</div>

<div class="foreground">
  <h1>Background Video Cover</h1>
</div>

如何将视频放入也可以在IE上运行的整个屏幕中

1 个答案: