JQuery эффект затенения YouTube

Question

На некоторых страницах YouTube используется функция «Выключить свет».

То же самое можно сделать в jQuery. Пример

Пример затемняет фон всей страницы, но видеопроигрыватель остается сверху.Почему это так?

А какой самый простой способ затемнить все div, кроме видео, явно?

Answer 1

Вы делаете это, создавая «общий» div, который покрывает всю страницу, устанавливая его на черный фон, полупрозрачный и z-index выше, чем у всех других элементов страницы.Затем вы устанавливаете z-индекс видеопроигрывателя выше, чем общий бланк, поэтому он не будет покрыт.

что-то вроде:

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