display graphic over video

[larsman]

I want to place a graphic over a video that has a transparent section to view the video through. I am spinning my wheels trying to make it work. No Joy. Any help would be appreciated.

[Eye for Video]

Is the video player Flash? If so the best way would be to get into the .fla file or create a new Flash player with the skin you want. You could even place your current player in a layer below the skin (if you are using Flash). A transparent hole would let the video player show through.
Non Flash alternatives could be:
Place a background image in your video <div> which has a place in the center for the video. Then using absolute positioning, place the video over the background image.... it would sort of look like the video was skinned. In this case the video would be over the top of the image so you could not get the overlayed effect like rounded corners over the top of the video... like in a TV set.
Another option would be to use z-indexing and absolute positioning to stack one <div>, the skin, over the top of the video holder <div>. You may experience problems getting this to work perfectly in every browser but for the majority this would work fine.
There's an example of an background image with a hole in the middle and a Flash animation placed over the top of the image using absolute positioning (not a video but would work just the same if it was).
http://www.uncledoodad.com/live_music.html
Good luck to ya'
EfV

[skilled1]

you can achieve this with div tags with zindex and the use of a png/gif image over the top of your video.

[larsman]

Thank You Skilled1 and TFV!

I have been trying to achieve this with stacked div's as my Flash skills are very limited. You can see what i have been able to achieve with this method at http://theimadvisor.com/sptest I have the video class z-index at 0 and the middlecontent class z-index at 1

Please take a look let me read your thoughts

Thanks!!

[Eye for Video]

Well it looks like you have the video displaying over the background content but by the z-index it should be displaying beneath it (z-index 0 will display below z-index 1). When z-indexing Flash you will need to use one of the non-windows modes in your Flash player parameters like:
<param name="wmode" value="opaque"/>
From previous post…
Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
Best wishes,
EfV