iOS Video overlapping unresponsive menu issues

If your videos are dynamically created and inserted (with javascript, for instance), and they overlap an UberMenu submenu (or any content on your page) iOS won’t handle that nicely – the overlapped content will become unresponsive after you activate/play the video.

Unfortunately, there is nothing to be done from an UberMenu standpoint – this is an issue with the way iOS handles dynamically inserted Flash objects and overlapping HTML elements. Here are some potential solutions for the issue – your mileage may vary:

Potential Solution #1

Getting embedded Youtube videos to stay under your drop down menu – even with an iPad – if you are using embed code, this may work – just like the wmode fix presented above.

Potential Solution #2

This Stack Overflow answer explains the dynamic insertion issue (see the answer with 18+ votes) :

This solution has worked for some people, depending on the situation

You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d

Potential Solution #3

If your videos are dynamically inserted, insert them statically instead. The issue seems to only occur with dynamically inserted videos, based on reports.

Potential Solution #4

If all else fails, you could write some javascript that will hide the video when UberMenu is in the hover state. Something like:

<script>
jQuery( document ).ready( function( $ ){
  $( '#megaMenu > ul > li' ).live( 'ubermenuopen', function(){
      $( '.video-replacement-link' ).remove();
      $( 'video, iframe' ).hide().after( '<a class="video-replacement-link" href="#">show video</a>' );
    });
    $( '.video-replacement-link' ).live( 'click', function(){
          $( 'video, iframe' ).show();
          $( '.video-replacement-link' ).remove();
    });
});
</script>

But even this may introduce its own issues in iOS. Until iOS Safari becomes a more robust browser, this may simply be a limitation of having videos on your site

If none of the above solutions work for you, unfortunately this issue seems unresolvable for the time being. This issue is due to the way mobile Safari handles video elements and focus layering. Until Apple resolves the issue with mobile Safari, there is no solution to my knowledge.