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.

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:

#video {
  position: absolute;
  top:0;
  left:0;
  width:940px;
  height:539px;
  background:#fff;
  display: none;
}
#video:target {
  display: block;
}
.btn-close {
  position: absolute;
  top:0;
  right:0;
  padding:20px;
  display: block;
  background-color: #fff;
}

HTML:

<p>
  <a href="#video" class="btn-cta">Watch Video Now</a>
</p>

<div id="video">
	<video width="940" height="539" controls>
	  <!-- MP4 must be first for iPad! -->
	  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"  /><!-- Safari / iOS, IE9 -->
	  <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"      type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
	  <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"       type="video/ogg"  /><!-- Firefox3.6+ / Opera 10.5+ -->
	</video>
	<a class="btn-close" href="#">X</a>
</div>

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. :’(