[SOLVED] Youtube/Flickr "lights-out"-like effect?

[zeeshan_haider000]

Hi,

Is there any script for youtube-like cinematic lights-off effect? like the background dims when a video is playing?

[.josh]

a lot of people accomplish that by loading a semi-transparent gif in a higher level z-index layer (with the video being even higher, of course)

[zeeshan_haider000]

a lot of people accomplish that by loading a semi-transparent gif in a higher level z-index layer (with the video being even higher, of course)

 

Hi Crayon,

How is that done? Is there any tutorials available online?

Regards...

[.josh]

You would use your favorite paint program to make a really big image.  Really big black box (or dark gray, whatever). Darker color you use, darker it will make the rest of the page.  Make it semi-transparent, like 50% alpha.  How transparent is up to you. Less transparent also = darker.  Image would be big enough to cover the width/height of your page. 

 

You would then have a div somewhere in your script.  <div class='fader'></div>  that's it.  And in your css file or inline in your head tags or something, your fader class would specify the background-image as the image you made, and the z-index as like 50 or something (just some level higher than the rest of your stuff. If you don't know about z-indexes then chances are, anything above 1 will do it for you, as things are by default put on level 1).  You would also specify the visibility as none, so it doesn't actually show.

 

Then, when the user plays the movie, you would have a js onclick attached to it, or an event listener, etc...depends on how you have your video player setup.  onclick or event or whatever, you would use js to make that div visible.  You would also have your video on a z-index layer higher than whatever you decided for your fader div, so that it doesn't get faded.

[zeeshan_haider000]

Thanks, i will try that.

Zee