如何在铬上使用背景视频？

Question

嘿，各位，我有个有点愚蠢的问题，显然我解决不了.我正在为一个任务开发这个网站，一切看起来都很好。但我是用狩猎旅行来设计网站的。

现在，当我打开该网站的铬，视频是不显示。我看到了一些关于如何创建背景视频的教程，但却把我所有的项目都搞砸了。我的问题是，我在CSS而不是HTML上实现了视频。在不改变所有HTML和CSS的情况下，CSS有什么简单的修复吗？

在这里我的网站，我知道它不是完美的耐心对我:D

https://bragainmax.netlify.app/index.html

HTML

​

.hero{
  min-height: 80vh;
  background: url("./_images/shop.mp4") center/cover no-repeat;
  display: grid;
  place-items: center;
}

.banner{
  background-color: white;
  padding: 4rem 0;
  border-radius: var(--borderRadius);
  box-shadow: var(--shadow-2);
  width: 80vw;
  text-align: center;
  max-width: var(--fixed-width);
}

<header class="hero">
   <div class="banner">
      <h1 class="title">Bargain Max</h1>
      <h1 class="title-underline"></h1>
      <p class="home_p title">The Products that you love for the price that you need</p>
      <button type="button" class="btn"> <a href="product.html">Our Products</a> </button>
   </div>
</header>

​

Answer 1

Υou不能以这种方式导入背景视频，您必须这样做。

希望我帮了你。

  .video-bg {
     object-fit: cover;
     height: 100%;
     width: 100%;
    }

    video {
     height: 100%;
     width: 100%;
     object-fit: cover;
    }

   .hero {
     min-height: 80vh;
     background: url("./_images/shop.mp4") center/cover no-repeat;
     display: grid;
     place-items: center;
   }

  .banner{
    background-color: white;
    padding: 4rem 0;
    border-radius: var(--borderRadius);
    box-shadow: var(--shadow-2);
    width: 80vw;
    text-align: center;
    max-width: var(--fixed-width);
    position: absolute;
   }

 <header class="hero">
    
    <div class="video-bg">

       <video preload="metadata" id="header-background-video" autoplay="" muted="" loop="" class="video"><source src="/_images/shop.mp4" type="video/mp4">
       </video>         
         
    </div>
   <div class="banner">
     <h1 class="title">Bargain Max</h1>
     <h1 class="title-underline"></h1>
     <p class="home_p title">The Products that you love for the price that you need</p>
     <button type="button" class="btn"> <a href="product.html">Our Products</a> </button>
   </div>
 </header>