Question

So I have a video, with an anchor on top. The button works fine on my PC, but when I view it on an iPad, I’m unable to click on the anchor.

I’ve replicated it with the following jsbin example.

Any suggestions?

Answer 1

I have a solution. It works for me since I don’t need the controls on the video to work, but may not work for everyone.

This is most suitable for situations where the video must be unlocked, or if you need to sign in to view the video.

To cut to the chase, just add the following CSS property to the video:

video { pointer-events: none; }

I’m going to mark this as the answer to my question, but if someone can give me a fix where the video controls still work, I will accept yours as the correct answer.

Update & Alternative Solution

Okay, so I’ve found that the best solution for my needs is to remove the controls from the video.

Simply changing <video controls to <video does the trick.