视频播放时如何使页面变暗？

Question

我已经看过几次这样做，在播放视频时整个页面会变暗或变黑。我想知道如何使用HTML CSS或Javascript完成此操作。

以下是我的意思：http://allmyvideos.net/vc0uqldjebnz

Answer 1

创建一个占据整个屏幕并且为黑色或黑色的叠加div。将其设置为以无显示开始。确保您的视频具有更高的z-index。然后播放视频时，将叠加div设置为显示，它应该使页面变暗。

例如，设置这样的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();