9

Just wondering if anyone knows any tricks to getting regular html content (mainly an img tag) to display on top of a video (via the video tag)?

Jason Miesionczek
  • 14,268
  • 17
  • 76
  • 108

4 Answers4

6

As others have intimated it's very easy to position HTML elements on top of VIDEO elements using absolute positioning. The challenge comes when you try to capture events on them in the iPhone, iPod and possibly older Android phones that don't play video assets inline on the page (as opposed to in a thin native playback client) since in those instances the VIDEO element greedily captures events.

If you use an IMAGE element or a DIV with its background-image set to an image you want to use as a "poster" or "thumbnail" then your users won't be able to tap on them to get the video to start playing -- the mobile browser will treat this behavior as if nothing but the VIDEO element exists in that space (good if you happen to click in the middle where the "big play" button is but not so helpful if you, say, have a custom control not in the middle.

The solution I've used in the past is to just put the IMG or DIV poster on the page where you would normally put the VIDEO element and shift the VIDEO element offscreen (absolutely positioned with left style set to, say, -3000px) so it can no longer hoard those events.

I know this isn't exactly what was asked, but hopefully this information will prove useful to someone.

natlee75
  • 5,097
  • 3
  • 34
  • 39
  • +1 I agree with your method. I had to implement a third party library that required a user action i.e. clicking a button. Quicktime player was a nightmare. I initially set the video element to display:none and only showed it after the users action. You method is perfect as it really doesn't matter where the video element lives as after all its just going to open in full screen anywhere. A little bit off css can fool the users – sidarcy Apr 19 '13 at 15:11
  • http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements – RobW Aug 29 '13 at 19:14
4

You can simply put html elements on top of HTML5 video by positioning them absolutly on top of the video. Give both the video element and the HTML element a "position:absolute" and put the HTML element a z-index higher than the video element's.

jj1910
  • 41
  • 2
0

Why not use the poster attribute? That way you can display an image until the video is loaded or play.

Dennis Enderink
  • 346
  • 1
  • 5
  • the idea is i am trying to integrate the video into part of the design of the site, where an area along the top of the video overlaps to make the video appear as though it is partly underneath. i tried to put the image inside the video itself, but due to the compression, the colors and size change slightly and the difference is quite noticeable. – Jason Miesionczek Jan 07 '11 at 15:28
  • The only solution I can think of for this particular example is to automatically put the div/img on top of the video with JavaScript. That way the video will be loaded along with the page and won't interfere with the image. You might want to keep an eye on the z-index. – Dennis Enderink Jan 07 '11 at 15:57
0

Can you set the video as background for that div? Not sure if it would work for your layout, but it seems logical...

zenbike
  • 258
  • 2
  • 10