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

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.