css视频、或者图片充满整个屏幕，随着屏幕缩放，以及自定义毛玻璃效果

css视频、或者图片充满整个屏幕，随着屏幕缩放

 <div class="video-container">
    <video class="banner-mp4" muted loop="loop" id="video" autoplay="autoplay">
            <source type="video/mp4" />
    </video>
  </div>
  //毛玻璃
<div  class="vab-screen-lock">
    </div> 
  setTimeout(()=>{
          document.getElementById('video').src = 'https://modao.cc/assets/video/home/banner.mp4'
        },1000)
/* 确保视频容器也填充整个视口 */
.video-container {
  position: fixed; /* 或 absolute，根据布局需求 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.banner-mp4{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* 调整以拉伸填充整个区域，可能会影响视频宽高比 */  
}

.vab-screen-lock {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $base-z-index;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.1);
    transition: $base-transition;
    backdrop-filter: blur(10px);

    &-background {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: $base-z-index - 1;
    }

    @media (max-width: 576px) {
      .vab-screen-lock-content {
        width: auto !important;
        margin: 5vw;
      }
    }
  }