jQuery youtube调光效果

Question

在某些页面上，youtube使用“关闭灯光”功能。

在jQuery中也可以这样做。 Example

该示例使整个页面背景变暗，但视频播放器仍位于顶部。为什么会这样？

除了明确的视频之外，最简单的方法是将所有div调暗？

Answer 1

您可以通过创建覆盖整个页面的“毯子”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();