极限高度header-background-video?
Limit height of header-background-video?
我正在制作放在 中 和 header 中的背景视频。 header 的高度仅为 100%-257 像素,因此页面的其余部分在加载页面时可见。
但是,我无法让视频成为 header 内的完整背景。它总是在 full-size 中溢出 header 容器。我错过了一些 css 吗?
非常感谢您的帮助!
Html:
<header id="home">
<div id="videoBackground">
<video loop="loop" playsinline="playsinline" autoplay="autoplay" muted="muted" poster="Images/posterImg.png" id="videoBackgroundVideo">
<source type="video/mp4" src="Images/BillVid.mp4">
</video>
</div>
<h1> This is a title</h1>
<h2> This is a subtitle</h2>
<div id="welcomeMessage">
<h3> Welcome at <span>My Page</span></h3>
<img src="Images/LogoRoundWhite.png" id="homeLogoWhite" style="border-style:none;" />
</div>
</header>
CSS:
header{
padding-top: 100px;
padding-bottom: 30px;
margin-top: 0px;
min-height: 400px;
text-align: center;
height: calc(100% - 257px);
justify-content: center;
overflow: hidden;
}
#videoBackground {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -10;
}
#videoBackgroundVideo {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
尝试添加
header {
position:relative;
}
绝对定位的元素将根据最近的父元素定位自己 position:relative;
如果它不存在,它只会根据我认为的 body 标签定位自己,这也是为什么 overflow:hidden 可能没有效果的原因。
这很好用。从 #videoBackgroundVideo
元素中删除 min-height: 100%;
。
header{
padding-top: 100px;
padding-bottom: 30px;
margin-top: 0px;
min-height: 400px;
text-align: center;
height: calc(100% - 257px);
justify-content: center;
overflow: hidden;
}
#videoBackground {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -10;
}
#videoBackgroundVideo {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
/* min-height: 100%; */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<header id="home">
<div id="videoBackground">
<video loop="loop" playsinline="playsinline" autoplay="autoplay" muted="muted" poster="Images/posterImg.png" id="videoBackgroundVideo">
<source type="video/mp4" src="Images/BillVid.mp4">
</video>
</div>
<h1> This is a title</h1>
<h2> This is a subtitle</h2>
<div id="welcomeMessage">
<h3> Welcome at <span>My Page</span></h3>
<img src="Images/LogoRoundWhite.png" id="homeLogoWhite" style="border-style:none;" />
</div>
</header>
我正在制作放在 中 和 header 中的背景视频。 header 的高度仅为 100%-257 像素,因此页面的其余部分在加载页面时可见。 但是,我无法让视频成为 header 内的完整背景。它总是在 full-size 中溢出 header 容器。我错过了一些 css 吗? 非常感谢您的帮助!
Html:
<header id="home">
<div id="videoBackground">
<video loop="loop" playsinline="playsinline" autoplay="autoplay" muted="muted" poster="Images/posterImg.png" id="videoBackgroundVideo">
<source type="video/mp4" src="Images/BillVid.mp4">
</video>
</div>
<h1> This is a title</h1>
<h2> This is a subtitle</h2>
<div id="welcomeMessage">
<h3> Welcome at <span>My Page</span></h3>
<img src="Images/LogoRoundWhite.png" id="homeLogoWhite" style="border-style:none;" />
</div>
</header>
CSS:
header{
padding-top: 100px;
padding-bottom: 30px;
margin-top: 0px;
min-height: 400px;
text-align: center;
height: calc(100% - 257px);
justify-content: center;
overflow: hidden;
}
#videoBackground {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -10;
}
#videoBackgroundVideo {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
尝试添加
header {
position:relative;
}
绝对定位的元素将根据最近的父元素定位自己 position:relative;
如果它不存在,它只会根据我认为的 body 标签定位自己,这也是为什么 overflow:hidden 可能没有效果的原因。
这很好用。从 #videoBackgroundVideo
元素中删除 min-height: 100%;
。
header{
padding-top: 100px;
padding-bottom: 30px;
margin-top: 0px;
min-height: 400px;
text-align: center;
height: calc(100% - 257px);
justify-content: center;
overflow: hidden;
}
#videoBackground {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -10;
}
#videoBackgroundVideo {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
/* min-height: 100%; */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<header id="home">
<div id="videoBackground">
<video loop="loop" playsinline="playsinline" autoplay="autoplay" muted="muted" poster="Images/posterImg.png" id="videoBackgroundVideo">
<source type="video/mp4" src="Images/BillVid.mp4">
</video>
</div>
<h1> This is a title</h1>
<h2> This is a subtitle</h2>
<div id="welcomeMessage">
<h3> Welcome at <span>My Page</span></h3>
<img src="Images/LogoRoundWhite.png" id="homeLogoWhite" style="border-style:none;" />
</div>
</header>