iPad 上的 HTML5 视频分层

我的视频由Ooyala在所有设备上都运行良好。当用户使用 iPad 并尝试通过下拉子导航查看页面时，就会出现此问题。子导航的每个部分无非是ul>li and a div通过 CSS 隐藏和显示。当视频正在播放或暂停（而不是加载时）并且用户点击主导航（以显示相应的子导航）时，子导航将覆盖视频。但是，这些链接均不响应点击。当尝试点击子导航链接时，视频会像被点击一样做出响应（显示滑块）。

我努力了all sorts of 解决方案，包括搞乱z-index在所有相关的元素上，都无济于事。我有什么遗漏的吗？

如果您想亲自尝试一下，请访问http://www.cordblood.com在 iPad 上，单击（或等待）第二张（或第三张或第四张）幻灯片，单击“观看视频”，点击播放（如果需要，您也可以暂停视频），点击主导航，然后尝试点击子导航显示的选项之一。

我正在使用 flowplayer 和一个简单的 CSS 下拉菜单，并且遇到了同样的问题。

我有下拉菜单，点击时会覆盖部分视频区域。子菜单按预期显示在视频上，但没有发送触摸事件。

我通过结合其他人回答的一些建议来解决这个问题这个问题: I set 能见度：hidden打开菜单时并且能见度：visible关闭子菜单时，并设置-webkit-transform-style：保留 3d视频上的 CSS 属性。

这是相关代码。我省略了菜单栏的 CSS，但它执行了您可能期望的操作 - 生成一个覆盖部分视频的菜单。

菜单和视频 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"});
    }
  );
);