Question

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; 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.

Answer 1

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;}