CSS视频背景+响应式设计+不拉伸

21 阅读1分钟

非常小脑的搜了很多内容,讲的那是天花乱坠。实际上好多搜到的都在拉伸视频,或者视频不会自动填充。最后还是自己写了,这里附上我自己写的的最终代码。

.background {
    z-index: -1;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0px;
    background-color: red;
    overflow: hidden;
  }
  .background>video {//只有这部分重要,前面那部分用你自己的
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    object-fit: cover;
  }
<div class="background">
    <video  loop  muted="yes" playsinline autoplay>
      <source src="/video/autoplay.mp4"/>
    </video>
  </div>

录屏_microsoft-edge_20231228150419.gif