HTML5 Video Layering on iPad

Question

I have video served by Ooyala that plays fine on all devices. The problem occurs when the user is on an iPad and attempts to view a page via a dropdown subnav. Each section of the subnav is nothing more than ul>li and a div hidden and shown via CSS. When the video is playing or paused (not while loading) and the user taps on the main nav (to show the corresponding subnav) the subnav covers the video. However, none of these links are responding to taps. When trying to tap the subnav links, the video responds as though it were being tapped (showing the scrubber).

I have tried all sorts of solutions, including messing with the z-index on all the related elements, all to no avail. Is there something I'm missing?

If you'd like to try this out for yourself, go to http://www.cordblood.com on an iPad, click (or wait for) the second (or third or fourth) slide, click "watch video", hit play (you can pause the video if you want, too), tap a main nav, and then try to hit one of the options the subnav displays.

Answer 1

I'm using flowplayer and a simple CSS dropdown menu and had the same problem.

I have drop down menu that, when tapped, covers part of the video area. The submenu shows up over the video as expected, but no touch events were being sent.

I fixed it by combining a couple of suggestions from others answering this question: I set visibility:hidden when opening the menu and visibility:visible when closing the submenu, AND set the -webkit-transform-style:preserve-3d CSS property on the video.

Here's the pertinent code. I left out the CSS for the menubar, but it does what you might expect - resulting in a menu that covers portions of the video.

menu and video HTML

<div id='nav'>
  <ul>
    ... <!-- bunch of ul/li stuff here for the menu and submenus -->
  </ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>

CSS

video {
  -webkit-transform-style: preserve-3d;
}

Javascript

$(document).ready(function(){
  $("#nav li").hover(
    function() {
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
      $("video").css({visibility:"hidden"});
    },
    function(){ 
      $(this).find('ul:first').css({visibility: "hidden"});
      $("video").css({visibility:"visible"});
    }
  );
);

Answer 2

I had a similar problem, but the solution was much simpler. Just need to remove the controls attribute from the video tag. As I am using jwplayer, the video tag is generated dynamically, so I need to remove the attribute using js. With jquery:

$("video").removeAttr("controls");

In my case, I'm already using a custom controller, so I don't need them... but I suppose (I haven't tried) you could hide and show them dynamically on upon some user action.