Issues with HTML5 video and the iPad

HTML 5 Video Player

I have recently been creating a site that has a “lightbox” that opens a HTML5 video with a close button in the top right corner of it. The close button is meant to float above the video (see below). The lightbox just opens via the :target pseudo class. The close button just links to an empty hash tag.

HTML 5 Video Player

Now, the close button (beautifully designed I know) is just meant to close the lightbox and nothing else. It works fine on all the desktop browsers, on Android tablets and on the BlackBerry Playbook. However when I got around to testing the iPad I found that the close button was not working at all. I tried to set the z-index of the close button and the video player but that did not seem to help at all.

After searching around the web for a while I came across a Stack Overflow article that said to useĀ -webkit-transform-style: preserve-3d on the video element. However that did not work either. I have attached the example code below.

CSS:

HTML:

I believe it has something to do with the way the iPad uses Quicktime to control HTML5 video.

Has anyone experienced this before? I would like some insight on this.

UPDATE: After a bit of research I have found out that if you have the default controls on a HTML5 video component, then the iPad overrides all touch events in that area. It seems that the only way around this issue is to create your own controls for the video player. A little annoying I must say, but it looks as though this is your only hope. :'(

5 thoughts on Issues with HTML5 video and the iPad

    • Just have use custom controls to control the video. Can’t use the default ones in webkit. So remove “controls” from the video element and build your own. That way you can have elements over the top of the video that are clickable.

  1. Hi Ed, i think if one still wants to use default controls in iPad , we can use a container div for the video tag and instead of giving video tag full screen height and width give some lesser dimensions, like i am using close button on the top left corner and i gave video tag less height and some top style so now the above area is clickable. Use background black if you want to so that it doesn’t look odd.It works for me atleast according to my requirements :)

  2. Hi everyone,

    I recently came upon the same problem on IOS.

    Deepak, your solution could probably work in portrait view but under landscape view nothing would guarantee that the video won’t end up being placed over the close button. The users could end up stuck on the video page forever.

  3. I read a lot of interesting posts here. Probably you spend a lot of time writing, i know how to save you a lot of work, there is an online tool that
    creates unique, SEO friendly articles in minutes, just search in google
    – laranitas free content source

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">