Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Activity Forums Web Design (WordPress, Joomla, etc.) Link to Pop Up Video Player

  • Curtis Thompson

    January 12, 2009 at 11:55 pm

    hello…

    ooh – honestly the best thing i can suggest is to view the source of their page – they have the perfect example there for you:

    https://www.anacortes.org/anacortes-video.cfm?vidName=activevisitor&returnto=anacortes-video

    the steps to do it:

    1. put a div with 100% width and height and a z-index of 100 or so on the page and set the opacity of it to the desired amount

    2. put a div centered on the screen with a z-index of anything > 100 with the video in it…

    i realize that you are probably looking for the details on the 2 steps, but they really do have it right there for you…view their source and track down the elements and you’ll be able to put together the specifics…

    hope that helps!

    sitruc

  • Nate Hanson

    January 13, 2009 at 12:11 am

    Ok, let me see if I got what you are saying…

    Step 1 would be to make visible a div that is a solid color, with opacity of say, 40% or something.

    Step 2 would be to make the video visible in a div centered on the screen.

    And as long as the z-indexes are correct (video on top), then that should work?

    Nate Hanson
    Pilothouse Films

  • Curtis Thompson

    January 13, 2009 at 12:32 am

    hello…

    yup – that’s pretty much it – note that there are a few nuances in this between firefox, safari, opera and ie in terms of css, but that’s what you’d need to do. you can load the divs at run time and just set their visibility to hidden if you want, and then change the innerHTML property of the video div as needed when users click to show videos…

    sitruc

  • Curtis Thompson

    January 13, 2009 at 12:33 am

    here’s a somewhat old but still applicable tutorial on this…

    https://www.codeproject.com/KB/scripting/js_floating_dimming_div.aspx

  • Abraham Chaffin

    January 13, 2009 at 5:38 am

    I actually made a tutorial on this that is in the Web Design Tutorials section here at CreativeCOW.

    https://library.creativecow.net/tutorials/webdesign

    The top tutorial describes how to do this.

    Abraham

  • Nate Hanson

    January 13, 2009 at 6:33 am

    Thanks guys! As always, the COW comes through. There is a lot to digest here, but I’ll give it a go.

    Much appreciated!

    Nate Hanson
    Pilothouse Films

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy