How to darken the page when playing a video?
I've seen this done a few times where the entire page is dark or black during video playback. I am wondering how this can be done using HTML CSS or Javascript.
Here's an example of what I mean: http://allmyvideos.net/vc0uqldjebnz
+3
source to share
1 answer
Create an overlay div that spans the entire screen and is dark or black. Set it so that it appears on the display. Make sure your video has a higher z. Then when the video is playing, set the displayed overlay display and it should make the page dark.
For example, set the div like this:
<div id="overlay" style="display:none;position:fixed;width:100%;height:100%;top:0;left:0;opacity:0.6;"> </div>
When the page loads, you won't see the overlay. Then when the video is playing, set the display to anything but one that will show the overlay (example using jQuery)
$("#overlay").show();
+2
source to share