jQuery youtube調暗效果

Question

在某些頁面上，youtube使用「關閉燈光」功能。

在jQuery中也可以做到這一點。 Example

該示例使整個頁面背景變暗，但視頻播放器保持頂部。爲什麼這樣？

什麼是最明顯的方式來暗淡除視頻之外的所有div？

Answer 1

您可以通過創建覆蓋整個頁面的「blanket」div，將其設置爲黑色背景，半透明和z-index高於所有其他頁面元素。然後，您將視頻播放器的z-index設置爲高於全部div，因此不會被覆蓋。

類似：

#blanket { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 100; 
    display: none; 
    opacity: 0.5; /* Will need to use a filter rule to make this work in IE */ 
} 

#video-player { 
    position: relative /* z-index doesn't work unless positioned */ 
    z-index: 200; 
} 

jQuery("#blanket").show();