jQuery hide issue in text overlay on iPad HTML5 video

The following code is working perfectly on every HTML 5 platform ... except for the iPad. I just want to "close" the video with a simple click on a div displayed on top of the video itself. If you have an idea on how this could be solved, even without jQuery, it could help a lot. Thanks.

$(function(){
  $("#Xmovie1").tap(function(event)开发者_如何转开发{
    $("#Menu1Mov").hide();
    $("#Home").fadeIn('slow');
  });
});

<div id = "Home" class="imgHome"><img id = "img1" src ="" alt="home"/>
  <div id = "Menu1Lib" class="cMenu1Lib"></div>
  <div id = "Menu2Lib" class="cMenu2Lib"></div>
</div>
<div id = "Menu1Mov" class="cMenu1Mov" >
  <video id="Menu1Movie" src = "mov.mp4" width="980" height="495" poster = "../medias/img/interface/Poster.jpg" controls></video>
  <div id = "Xmovie1" class = "cXmovie1">x</div>
</div>

---

Have you tested whether whole event triggers when tapping on "x"? I mean is this a problem in $("#Menu1Mov").hide() or that XMovie1 div element is falsely positioned.

If event triggers, you could try, instead of short-hand: $("#Menu1Mov").css("display", "none") and the same for #Menu1Movie.

If event doesn't even trigger (don't know why this would be the case, but just for sure), then you should trying to redeclare CSS for #Xmovie1, bringing it top for sure, eg. with position:absolute + z-index.

---

Just to add my experience. I had the same issue, a div with some labels. Clicking on the div the labels had to toggle. On browsers it was working fine, however on ipad the labels would not hide.

I changed the positioning of labels to absolute and put a z-index and then it started working.