By sgprs on

Hey,

Does anyone have an idead how to accomplish the "Dim the Lights" feature found on Hulu? You know, when you watch videos on Hulu (and now Youtube), they have a button that dims the background so it's not distracting. Seems that it's done with some type of Lightbox code.

If you haven't seen this feature, check this link to Hulu and see: http://www.hulu.com/dark-fields-aka-farmer-brown

I Googled, but really couldn't find anything. It may be that it's on the code for the video, but it works only on Hulu. When I embed the video, it's not there (of course) because it's dimming their site.

Just wondering if it's possible to implement this in Drupal.

Using Drupal 6.8, custom theme.

Thanks!
Chris

⋅ Categories: Drupal 6.x

Comments

sgprs’s picture

sgprs commented

Just bumping... to see if anyone has an idea.

thinkingman’s picture

thinkingman commented

It’s pretty simple, actually, but takes a lot of technical steps in case you’re not used to all of the technologies involved in the process.
In CSS, you create an overlay DIV that’s styled with a high z-index, stretches the full width and height of the window, has a black background, zero opacity and display:none; so it appears above all non-Flash content on the page (Hulu’s is actually a little more complicated than that), but is currently invisible. Clicking on the Flash button calls an ExternalInterface javascript function that in turn calls a Prototype transition which makes the DIV visible and fades-in its opacity. Of course, your embedded Flash content must have a higher z-index than the overlay DIV, so as not to fade it as well.

sgprs’s picture

sgprs commented

I appreciate the help. I'll try to put something together like you mentioned. One more thing: What if I'm using embedded content. More specifically, flash embedded from Hulu. Is it still the same principal? Would any other mods need to be done considering that I don't have control over Hulu's flash since it's embedded?

Thanks for the help!

hankpalan.com’s picture

hankpalan.com commented

I've been trying to do this for a while. Somebody finally pointed me to this site: http://www.jankoatwarpspeed.com/post/2009/05/17/Use-jQuery-to-turn-off-t...

Once I get this working on my site, I'll write up a tutorial on how to do it with Drupal.

Wedding Videography - www.rusticred.com
Web Presence Management and Design - www.hankpalan.com

markosaurus’s picture

markosaurus commented

I've seen this done before and wondered how it was done, now I know!

Thanks for posting this, I'll definitely be using this in the future, and it's really a neat solution when you look at just how little jQUery is actually involved. I was expecting a lot more involved coding when someone mention lightbox, but it's nowhere near as complex.

FYI, I can't view the HULU example outside of the USA, it says it's not available here yet. (I'm in the UK.)

Thanks,

Mark