I would like to create a div overlay over videos in a html page. The videos could be embedded YouTube videos, or from any other source. Any ideas on how to do this? I have done a similar task of overlaying divs on images but never did for videos. Would greatly appreciate if anyone could point me in the right direction.
Asked
Active
Viewed 2,530 times
1
-
Duplicate question. Solution can be found here: http://stackoverflow.com/q/3820325/555177 – anataliocs Jul 22 '11 at 19:27
1 Answers
1
Just make sure wmode="Opaque"
or wmode="Transparent"
is set on the video embed and the video will recognize its parents' z-index
css property.
wmode - Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

Josiah Ruddell
- 29,697
- 8
- 65
- 67
-
The script I am creating will be used over webpages I do not have access to. It dynamically detects videos and calculates their position and then sets the overlay. Can I set wmode property in such cases dynamically? – dev_musings Apr 12 '11 at 17:54
-
So are you saying the "web pages" are within a child (frame) on your current page? – Josiah Ruddell Apr 12 '11 at 17:56
-
No. This script would be used as a widget to display an overlay div for any webpage with video content. Say, you have a blog with embedded videos and you would like have a an overlaying div with some specific content over your videos. Then you should just be able to include my script for that. Since I do not have access to your blog's source code, I would like to make it work on the fly. – dev_musings Apr 12 '11 at 18:03