Link to Pop Up Video Player

[Curtis Thompson]

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]

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]

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]

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

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

[Abraham Chaffin]

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]

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