使用CSS添加控件到HTML5背景视频

Question

我一直在努力寻找这个问题的答案，我想将控件添加到HTML5背景视频，以便用户至少可以选择暂停视频以获取辅助功能。内置的HTML5“Controls”属性工作得很好，但只要我添加我的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%; 
} 

Answer 1

如何像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>

Answer 2

只是注意 - 除非你想集中出于某种原因在页面上的视频，你并不真的需要高度100％。