Как затемнить страницу при воспроизведении видео?

Question

Я видел, как это делалось несколько раз, когда вся страница будет темной или черной во время воспроизведения видео. Мне интересно, как это можно сделать, используя HTML CSS или Javascript.

Вот пример того, что я имею в виду: http://allmyvideos.net/vc0uqldjebnz

Answer 1

Создание наложения DIV, который занимает весь экран и темный или черный цвет. Установите его так, чтобы он отображался на дисплее. Убедитесь, что ваше видео имеет более высокий индекс z. Затем, когда видео воспроизводится, установите отображаемый экран наложения, и он должен сделать страницу темной.

Например, установить DIV так:

<div id="overlay" style="display:none;position:fixed;width:100%;height:100%;top:0;left:0;opacity:0.6;">&nbsp;</div> 

При загрузке страницы, вы не увидите наложения. Затем, когда воспроизведение видео, установите на дисплее ничего но ни один, который будет отображаться оверлей (например, с помощью JQuery)

$("#overlay").show();