我一直在努力寻找这个问题的答案,我想向 HTML5 背景视频添加控件,以便用户至少可以出于可访问性原因选择暂停视频。内置的 HTML5“控件”属性工作得很好,但一旦我添加 CSS 将视频放在后台,控件就会消失。如何保留控件并将视频置于后台?
这是我的简单 HTML5 代码:
<div class="fullscreen-bg">
<video controls loop muted autoplay poster="Rustypic.jpg" class="fullscreen-bg-video">
<source src="Rustybeg.webm" srclang="en" type="video/webm">
</video>
</div>
这是我将视频置于背景的 CSS:
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
最佳答案
像this这样的东西怎么样? ?
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -5;
}
<div class="fullscreen-bg">
<video controls loop muted autoplay poster="Rustypic.jpg" class="fullscreen-bg-video">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<div class="content">NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.</div>
关于css - 使用 CSS 添加控件到 HTML5 背景视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33163669/