How do you overlay text on images/videos?

views:

answers:

+2 Q:

How do you overlay text on images/videos?

Hi. We need to place text over objects in a web page, similar to this: http://www.queness.com/resources/html/slideshow/jquery-slideshow.html

The text "bar" needs to appear on top of images and videos. For the videos, we're using the html5media library (http://code.google.com/p/html5media/), which renders a <video> tag for those browsers that support it, or a Flowplayer for others.

How do you do this with jQuery? Is it even possible for videos? There are examples but none that allow for text to be on top of <video> or Flowplayer objects. Thanks.

+1 A:

Have you tried absolute positioning for text, with a transparent background?

Jay 2010-04-14 18:46:58

Yes, but the text goes underneath.

Alex 2010-04-14 19:14:20

did you set the z-index css property to put them on top?

Jay 2010-04-15 14:14:03

+2 A:

you need to have your flash object in wmode=opaque in order to be able to place html on top of it

XGreen 2010-04-14 19:43:03

Thanks, XGreen and dev-null-dweller. That works in all browsers except IE6 (and lower) -- and I know why: It's the CANVAS object from the jQuery Background Canvas library, used to create transparency and rounded corners for the container DIV. On IE6, you get a cloudy video, because the CANVAS is either on top or somehow interfering with the opaque video.

Alex 2010-04-14 20:43:30

By the way, for those interested in adding the opaque parameter to Flowplayer, you need to add it to the following variable in the Flowplayer JavaScript library file: var i={width:"100%",height:"100%",allowfullscreen:true,wmode:"opaque",allowscriptaccess:"always",quality:"high",version:null,onFail:null,expressInstall:null,w3c:false,cachebusting:false}

Alex 2010-04-14 20:46:38

I really think we as programmers should start to incorporate the following code in our pages:if($.browser.msie :)

XGreen 2010-04-14 20:59:17

Oh, I wish so much that we could do that, XGreen! IE6 makes everything so much harder. In a few years, when its usage drops to where IE 5.x is, we can abandon it. Some companies (Google and YouTube) have already stopped supporting it.

Alex 2010-04-14 21:05:38

ansaurus

tags:

views:

answers:

How do you overlay text on images/videos?

related questions