如何製作此Youtube視頻點擊（css + z-index）？

Question

我希望Youtube視頻成爲背景牆紙，但我仍然希望它是互動的。即用戶可以通過點擊來暫停視頻。

現在，我已經將iframe設置爲-99的z-index。出於某種原因，我無法點擊它！用Firebug進行檢查後，似乎機身涵蓋了iframe。 （點擊它的唯一方法是，如果你向下滾動到底部，身體結束和iframe顯示。

有沒有什麼辦法讓這個iframe可以點擊而不改變其他東西呢？現在，我的主要網站，東西都有默認的z-index。我不想讓它們都成爲「2」，所以我可以讓iframe「1」

注意：你不能把這個代碼粘在jsfiddle中。就像你說的，你必須改變，除了iframe的身體的每一個孩子的z-index它不會因爲的jsfiddle的框架的工作。）

<style> 
    body{ 
     padding:0px; 
     margin:0px; 
    } 
    iframe{ 
     width:100%; 
     height:100%; 
     position:fixed; 
     top:0px; 
     left:0px; 
     z-index:-99; 
    } 
    .go{ 
     color:#fff; 
     position:relative; 
     margin-top:50px; 

    } 
</style> 

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 

<iframe id='youtube_bg' class="youtube-player" type="text/html" src="http://www.youtube.com/embed/lUjWJSnGVB0?wmode=opaque&autohide=1&autoplay=1&enablejsapi=1" frameborder="0">&lt;br /&gt;</iframe> 


<div class="go"> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
</div> 

Answer 1

。

body > * { 
z-index : 2 !important; 
} 

#youtube_bg { 
z-index : 1; 
} 

或者您將body和html的z-index更改爲-1，iframe更改爲0，內容保持1或auto。

html, body { 
z-index : -1; 
} 
#yotube_bg { 
z-index : 0; 
} 

對於以後的CSS編輯第二個解決辦法是