全屏视频问题
问题描述：
该视频似乎工作完全罚款全屏。唯一的问题是我看不到我的标题。看起来，视频正在赶超他们。我只想看到标题，当我从视频中向下滚动时。全屏视频问题
有谁知道解决方案？
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
header {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: transparent;
z-index: 1;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}<body>
<header>
<video poster="messi.jpg" autoplay="true" loop>
<!-- <source src="ships.mp4" type="video/mp4"> -->
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>
</header>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</body>
答
您已经使用position:absolute两个头和视频height:100vh视频。这部分正在造成问题。将高度更改为100％，位置：相对。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
header {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
z-index: 1;
}
video {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}<body>
<header>
<video poster="messi.jpg" autoplay="true" loop>
<!-- <source src="ships.mp4" type="video/mp4"> -->
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>
</header>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</body>
它的工作原理，但让我的浏览器的时候smaller..the视频不是全屏了 – Sebbe77
当你改变窗口大小发生了什么事？ –
视频变得更小，不再适合全屏 – Sebbe77