我的问题是,尽管我的桌面上一切正常,但当我在手机上查看它时,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%;
}
}
最佳答案
您只需要为 #bgVideo
使用以下 CSS
#bgVideo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
overflow: hidden;}
object-fit
属性在这里很重要。你可以了解更多
here
关于html - 背景视频无法在移动设备上调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52427980/