Question

我正在尝试设置全屏自动播放背景视频。这是我获得视频的链接，https://pixabay.com/en/videos/saigon-landscape-vietnam-travel-14385/

在全屏上看起来还不错，但是当我最小化屏幕时，顶部会有空白吗？我该如何避免呢？我在CSS中写了一个媒体查询

@media only screen and (max-width: 900px) {


    video {
        background-attachment:unset;
        position:absolute;
        margin-top: -500px !important;
    }

}

我想设置边际收益不是一个好主意。

这是我的html和CSS代码

body {
  font-family: 'Poppins', sans-serif !important;
}

.w3-bar-item {
  margin: 0;
  padding: 40px 10px 5px 10px !important;
  color: whitesmoke !important;
  font-weight: 700;
}

.showcase h1 {
  color: floralwhite;
  font-family: 'Poppins', sans-serif !important;
  margin: 0 auto;
  margin-top: 300px;
  font-size: 3rem;
  font-weight: 500;
  text-transform: uppercase;
}

.showcase p {
  margin-top: 30px !important;
  font-size: 1.2em;
  color: whitesmoke;
  max-width: 900px;
  margin: 0 auto;
}

.showcase button:hover {
  background: darkred !important;
  opacity: 0.8 !important;
  color: white !important;
}

.showcase {
  margin-bottom: 50px !important;
}

@media only screen and (max-width: 900px) {
  .showcase {
    margin-bottom: 5px !important;
  }
  .showcase h1 {
    margin-top: 200px;
  }
}

.section {
  padding: 10px;
}

.section img {
  width: 100%;
}

.w3-tag {
  margin: 6px 0 0 6px;
}

video {
  background-attachment: fixed;
  position: fixed;
  background-size: cover;
  top: 60%;
  left: 50%;
  margin-top: -50%;
  margin-left: -50%;
  z-index: -1;
  max-height: 1000px;
  opacity: 0.9;
}

button {
  margin-top: 5px !important;
  border-radius: 10px;
}

footer {
  background-color: darkslategray;
  color: white;
}

footer p {
  margin: auto;
  padding: 10px 0px 5 px 0px;
  font-size: 1.2em;
  font-weight: 500;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>A Website with W3 Css Framework</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <link rel="icon" type="image/png" href="img/icon.PNG">
</head>

<body>
  <!--Navigation-->
  <div class="w3-bar">
    <div class="w3-tag w3-xxlarge w3-red w3-round w3-mobile" style="padding:10px">

      Website Logo
    </div>


    <span class="w3-right w3-xlarge">
                <a href="#" class="w3-bar-item w3-button w3-mobile w3-hover-red">Home</a>
                <a href="#" class="w3-bar-item w3-button w3-mobile w3-hover-red">About</a>
                <a href="#" class="w3-bar-item w3-button w3-mobile w3-hover-red">News</a>
                <a href="#" class="w3-bar-item w3-button w3-mobile w3-hover-red">Downloads</a>
            </span>
  </div>

  <!--Showcase-->

  <section class="showcase">
    <div class="w3-container w3-center">

      <h1>Slogan goes here!</h1>

      <p class="w3-animate-opacity w3-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex consequuntur inventore sequi rem quisquam sint adipisci dolorem at dignissimos.</p>
      <button class="w3-button w3-red w3-large w3-opacity-min" onclick="document.getElementById('form').style.display='block'">Learn More Now</button>
      <video id="myVideo" src="video/saigon.mp4" type="video/mp4" muted autoplay loop></video>
    </div>
  </section>

  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
  <script type="text/javascript" src="js/script.js"></script>

</body>

</html>

Answer 1

为什么不这样做呢？

video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  min-height: 100%;
  min-width: 100%;
}

您的背景规则不适用于视频。

如何在最小化的同时保持视频全尺寸？

1 个答案: