CODEWITHSUNDEEP
htmlhtml5-video
Jason Miesionczek
Jason Miesionczek

Reputation: 14448

HTML5 video: possible to place regular html content over video

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)?

Upvotes: 9

Views: 16123

Answers (4)

natlee75
natlee75

Reputation: 5197

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.

Upvotes: 6

jj1910
jj1910

Reputation: 41

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.

Upvotes: 4

zenbike
zenbike

Reputation: 258

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

Upvotes: 0

Dennis Enderink
Dennis Enderink

Reputation: 346

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

Upvotes: 0

Related Questions