html - 背景视频无法在移动设备上调整

Question

我的问题是，尽管我的桌面上一切正常，但当我在手机上查看它时，overflow-x: hidden 不起作用。

这是有问题的网站，ryanjthacker.com这是github文件以查看整个代码。

<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>

body {
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden
}

#welcome-section {
    box-sizing: border-box;
    width: 100%;
    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;
}

@media only screen and (max-width: 768px) {
    #bgVideo {
        min-width: 50%;
        height: 50%;
    }
}

Answer 1

您只需要为 #bgVideo 使用以下 CSS

#bgVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;}

object-fit 属性在这里很重要。你可以了解更多 here