Unable to interact with content over HTML5 video in iOS

Question

I've been given a design to implement which has a lightbox which has some content inside which includes links. This is all fine and working except for when it comes to iOS where it's not possible to interact with the content of a lightbox if its position happens to be on top of a video.

It's acting as though the video is on top of the lightbox content - even though it's behind. The issue occurs even with extremely simple barebones HTML.

Stripped back HTML:

<video id="home_video" controls preload="none" poster="http://www.videojs.com/img/poster.jpg" width="500">
  <!-- video sources -->
</video>

<!-- positioned over the video -->
<div id="lightbox">
  <a href="#" id="not-touchable">Not touchable on iOS</a>
  <a href="#" id="touchable">Touchable because it's not over a video</a>
</div>

Associated stripped back styling:

#lightbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
}
#lightbox > a {
  display: inline-block;
  background: red;
  padding: 20px;
}
#touchable {
  margin-top: 400px; /* taller than video */
}

I've put together a jsfiddle example. It includes some JS which alerts when you've successfully clicked/touched a link. On desktop browsers it's possible to click both links, on iOS it's only possible to click the second.

It might be worth noting that the issue occurs whether the lightbox is pre-opened on page, or after being explicitly opened as in this jsfiddle

I can think of a number of ways of hacking around the problem - such as moving the video off screen, replacing it with its poster image, or by transforming the video using translateX to hide it, but I'd prefer to leave the video where it is, if possible.

Has anyone stumbled across this issue before and found a solution? Any pointers?

Answer 1

This is a quirk of Mobile Safari, where it intercepts all touch/click events for elements on top of a video element, regardless of z-index or DOM order, only when the controls attribute is set.

So the solution is to remove the controls attribute and implement your own custom controls wit Javascript. You can use existing open source players to provide these controls for you (e.g. jPlayer, videojs, etc.), but you need to be careful because some of them have a special case for iOS where they will just use the native player controls. I think this is because it's simpler than making those mouse-centric controls work with the quirks of iOS (like touch and lack of volume control). So you need to check the documentation to see if there's a flag to force the player to use its own controls rather than the built-in ones.