Clicks on top of html5 Video elements don't work in Safari on iPhone

Question

Does anyone know how to get clicks to register on top of an html5 video element in Safari on an iPhone?

I've tried a number of techniques mentioned here on SO:

• no 'controls' attribute on the video element
• absolutely position my clickable elements on top of the video

Nothing seems to work. I don't see any click events, nor do I even see touchstart. I've tried on iOS5 and iOS6.

I'd like to achieve something similar to Vimeo's mobile site. They seem to absolutely position a button on top of their html5 player, and clicking it works. I've looked at their source and I can't see anything special...yet their click handler works.

Here's a JSFiddle of a very simple example. Tapping the blue button doesn't seem to fire a click event:

http://jsfiddle.net/5kLKg/

see JSFiddle

Answer 1

It looks like Vimeo actually uses display: none on the video element. I'm thinking that my original question might be impossible.

I updated my fiddle to use the Vimeo solution here:

http://jsfiddle.net/5kLKg/2/