jquery - jQuery YouTube调光效果

Question

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

可以在jQuery中完成相同的操作。 Example

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

最明确地使除视频以外的所有div变暗的最简单方法是什么？

Answer 1

通过创建覆盖整个页面的“空白” div来实现此目的，并将其设置为具有比所有其他页面元素更高的黑色背景，半透明和z-index。然后，将视频播放器的z索引设置为高于橡皮布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();