'a' links are not working on html5 Video tag in iPhone Safari

I am using html5 video tag for my mobile website in Safari browser. The video tag is working fine but I also have some 'a' links overlapping on that video. I have added those links with absolute position. When I click on the links, they are not working.

Does anybody have any solution to this?

Here is my code:

CSS: .absDiv{
    background: #fff; position: absolute; top: 90px; left: 30px;开发者_如何学C padding: 4px; z-index:9999; font-size: 1.2em;
}

HTML: 
<div style="border: 1px solid #f00; position: relative;">

<div class="absDiv">I am <a href="http://www.google.co.in/">absolute</a> positioned div</div>

<video width="320" height="240"  autoplay="autoplay" loop="loop" controls="controls" tabindex="0">
    <source src="video1.ogv" /> 
    <source src="video1.mp4" />     
</video>

</div>

I googled for it but couldn't find any help.

Thanks in advance.

---

The issue here is "controls" on your video tag. On iOS, whilst the video player is set to use its default controls it will ignore all other touch/click events on the video (and from anything on top of the video).

To get your links working you can replace your opening video tag with the following:

<video width="320" height="240"  autoplay="autoplay" loop="loop" tabindex="0">

But this does mean you'll no longer have play/pause buttons, scrubber etc so you'll either need to go without these or roll your own.

---

Did you try setting the z-index of the anchor tag to higher than the video tag?

So for example

a{position:absolute; top:whatever; left:whatever; z-index:10;}
video{position:relative; z-index:1;}

---

Try adding playsinline="playsinline" webkit-playsinline attributes to the video tag:

<video src="..." playsinline="playsinline" webkit-playsinline></video>