Question

我试图隐藏视频的溢出流，使其与容器的大小相同，但我尝试了溢出：hidden;在容器上，但没有效果。

基本上，当您浏览该站点时，我试图使视频不调整其长宽比，而只是隐藏容器中溢出的部分。

我在下面添加了代码，这是有问题的网站，因此您可以看到我在说什么：ryanjthacker.com

<header id="welcome-section">
        <div>
            <p id="hello">Hello, my name is</p>
            <h1 id="ryan">Ryan Thacker</h1>
            <a href="#section-a" class="button">Learn More</a>
        </div>
        <video autoplay muted loop id="bgVideo">
          <source src="images/Beach.webm" type="video/mp4">
        </video>
</header>



#welcome-section {
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  text-align: center;
  color: white;
  font-family: "Montserrat", sans-serif;
}

#bgVideo {
  position: absolute;
  top: 0px; 
  left: 0px; 
  min-width: 100%; 
  min-height: 100%;
  z-index: -1;
}

Answer 1

您好，如果我对您的问题的理解正确，那么您希望视频宽度与＃welcome-section -s width一样大。我添加了一些CSS行，它解决了问题。

 xaxis = list(anchor = "x1")

Answer 2

您可以将overflow-x: hidden添加到body。

隐藏视频背景溢出

2 个答案: