jQuery youtube dimming effect

Question

On some pages youtube uses "Turn off the lights" feature.

The same can be done in jQuery. Example

The example dims the entire page background but the video player remains on the top. Why is it so?

And what is the simplest way to dim all divs except the video one explicitly?

Answer 1

You do it by creating a "blanket" div which covers the entire page, set it to have a black background, semi-transparent, and z-index higher than all other page elements. Then you set the z-index of the video player to be higher than the blanket div, so it won't be covered.

something like:

#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();