How to darken page when video plays?


I've seen this done a few times where the entire page will go dark or black while the video is playing. I'm wondering how this can be done using HTML CSS or Javascript.

Here's an example of what I mean:

Problem courtesy of: Batman


Create an overlay div that takes up the whole screen and is dark or black. Set it to start as display none. Ensure that your video has a higher z-index. Then when the video is played, set the overlay div to display and it should make the page go dark.

For example, set a div like this:

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

When the page loads, you won't see the overlay. Then when the video plays, set the display to anything but none which will show the overlay (example using jQuery)

Solution courtesy of: Sites Done Right


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.