title: HTML5 Video Layering on iPad
body: <p>I have video served by <a href="http://www.ooyala.com" rel="nofollow noreferrer">Ooyala</a> 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 <code>ul&gt;li</code> and a <code>div</code> 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).</p>
  
  <p>I have tried <a href="https://stackoverflow.com/questions/3600732/z-index-layering-for-html5-video-ipad">all</a> <a href="https://stackoverflow.com/questions/6872522/overlay-over-dynamically-inserted-video-tag-in-ipad">sorts</a> of <a href="https://stackoverflow.com/a/3750330/7173">solutions</a>, including messing with the <code>z-index</code> on all the related elements, all to no avail. Is there something I'm missing?</p>
  
  <p>If you'd like to try this out for yourself, go to <a href="http://www.cordblood.com" rel="nofollow noreferrer">http://www.cordblood.com</a> 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.</p>