Julie Julie - 4 months ago 12
jQuery Question

Why doesn't onClick work with HTML5 video background?

I have a full screen video, with HTML5. I am able to add text over it, but the text doesn't seem to be selectable with developper tools on Firefox (which is not an issue itselft, but I think it may be causing my issue).

I tried to add two icons mute and unmute, and add an OnClik event on it. I can see both icon, but when I click on them, nothing happens. It looks like I can select the image, but that's it.

Do you have any idea why the onclick event is not triggered ?

Here is a JSBin : http://jsbin.com/sacineniqu/1/edit?html,css,output

I can't understand what I may be missing...

Thanks !!

ANSWER : The z-index was incorrect. The masthead had a -1 z-index, therefore, click event were not reconized. My issue is fixed ! Thanks !

Answer

In this example it's because your .masthead element, in which the images are sitting, is set to z-index:-1. Any mouse interaction with it and its children, regardless of their z-index positions, are blocked by the main page's content which sits at z-index:0.

.masthead{
  position: relative;
  color:#fff;
  z-index:-1; /* this places your buttons behind everything else */
  overflow:hidden;
}

Moving your .masthead to index 0 will fix it.

Comments