html - 隐藏视频背景溢出

Question

我试图将视频的溢出隐藏为与容器相同的大小，我尝试过 overflow: hidden;在容器上，但没有任何效果。

基本上，当您查看该网站时，我试图让视频不调整其宽高比，而只是隐藏容器溢出的部分。

    <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

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