Hi Dave - Welcome to the Forum!
What happens after the video overlay is displayed in terms of being able to click other elements? An element under a transparent PNG will not trigger directly (even in the transparent areas), so I assume WebM would exhibit the same behavior (have not experimented with WebM transparency myself). If this behavior does prove the same for WebM… how about instead You place the video under the various elements (i.e. the “map”) You wish to trigger?
If You need to animate directly on the element clicked on, You could temporarily remove it from the Hype scene while the video plays. The element would also be rendered in the actual video itself I assume - and so would create a seamless effect.
Some caveats here which may not apply in your case because You were planning to use WebM which isn’t natively supported by iOS anyway…
Jonathan Deutsch Team Tumult - Feb 2, 2016
Technically elements can overlay on top of video, but it should be avoided as there are a few major problems:
iOS likes to have no elements layered on top of video, and the iPhone specifically wants to play videos full screen
HTML doesn’t provide enough mechanisms for highly accurate syncing of animations to video
It is probably better to do this either with video production software like Final Cut Pro, or via code running on a server that can generate this dynamically and spit out an MP4/video the client sees.
Full thread here.
I am ankle deep in creating a similar effect for a project I’m working on - no map - but I am overlaying elements on top of a video so the video takes on an interactive quality. So far so good in all modern browsers on a Mac. I have not had any syncing problems because my elements are static. (I have casually experimented with animated elements - in case I might need that capability - without having syncing issues.)
Unlike your case, I need my project to work on an iPad. I will be giving that scenario my first go this weekend.