CODEWITHSUNDEEP
htmlcssvideo
MikkyX
MikkyX

Reputation: 303

Video reacting to click on overlaid <a> element (IE10)

A client still using IE10 (and no, sadly, upgrading doesn't seem to be an option here) has reported an issue with a piece of HTML we've set up.

We've got a video, embedded via a Vimeo iframe, and this is overlaid by a link, positioned absolutely, width 100% height 100% on top of the video. When you click this link - no matter where on the video you click, the link is followed as expected.

When you click on the "link" in IE10 and possibly lower, the video reacts to it by pausing and the link is not followed UNLESS you click explicitly on the link text.

Rough code outline follows:

<div>
    <iframe width="100%" height="100%" src="VIMEO URL HERE"></iframe>
    <a href="/link-here">link text</a>
</div>

div {
    position: relative;
}

iframe {
    position: absolute;
    z-index: 1;
}

a {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
}

Is there a way to fix this in older browsers so that the link truly overlays the video and the video therefore can't react to the click? We have jQuery 1.x on the site if a Javascript solution is required (it's quite an old one, we're in the middle of rebuilding)

Here's a link to a CodePen showing the code behind the problem but, brilliantly, it won't open in IE10! http://codepen.io/anon/pen/vxLEgQ

Upvotes: 1

Views: 34

Answers (1)

C3roe
C3roe

Reputation: 96306

So, created my own example based on your codepen; now I can only test in an IE 11 and emulate IE 10, don’t have a native IE 10 here - but I think this should work in the “real” one as well.

Older IE sometimes have problems properly catching clicks on “transparent” elements - but setting a background usually fixes that, and via rgba that background can be transparent as well (just using the transparent keyword doesn’t seem to work though.)

So try and simply add this for your link, that should make it properly clickable in IE 10 as well:

background: rgba(255,255,255,0);

Upvotes: 1

Related Questions