html - 如何创建一个视频页面，在启动视频后，其他所有内容都会变黑并且视频以浏览器为中心？

Question

我在某些网站上看到，在页面上开始播放一些视频后，其他所有内容都会变黑并且视频开始播放。如何才能做到这一点？是否只能使用某些特定的视频类型，如 flash？

Answer 1

创建一个浏览器窗口大小的大 div，给它一个 100 左右的 z-index，然后给视频一个更高的 z-index。将它的背景设置为黑色，并且可能带有一些不透明度。

.someDiv{ 背景：黑色；z 指数：100；} .video{ z-index: 101; }

然后用JS让div在你点击播放的时候出现。还有一个单独的“暗灯”按钮。

Answer 2

这称为灯箱。

它通常用于显示图像，但可用于将焦点放在页面上的任何内容上。鉴于; 不，它不仅与闪光灯兼容，因为您可以将效果应用于任何元素。

除了为视频元素（例如flashand ）编写自定义元素之外<video>，您还可以只修改现有元素。