使用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％。