display graphic over video
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.
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).
Good luck to ya'
you can achieve this with div tags with zindex and the use of a png/gif image over the top of your video.
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
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:
From previous postů
<param name="wmode" value="opaque"/>
Window Mode (wmode) - What's It For?
There are three window modes.
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread