jQuery скрыть проблему в наложении текста на iPad видео HTML5

Question

Следующий код отлично работает на любой платформе HTML 5 ... за исключением iPad. Я просто хочу "закрыть" видео простым нажатием на элемент div, отображаемый в верхней части самого видео. Если у вас есть представление о том, как это можно решить, даже без jQuery, это может очень помочь. Спасибо.

$(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>

Answer 1

Просто чтобы добавить мой опыт.У меня была та же проблема, div с некоторыми ярлыками.При нажатии на div метки должны были переключаться.В браузерах все работало нормально, однако на ipad ярлыки не скрывались.

Я изменил положение ярлыков на абсолютные и поставил z-index, после чего он начал работать.

Answer 2

Вы проверяли, срабатывает ли целое событие при нажатии на «х»? Я имею в виду, это проблема в $ ("# Menu1Mov"). Hide () или что элемент div XMovie1 расположен неверно.

Если событие срабатывает, вы можете попробовать вместо сокращения: $ ("# Menu1Mov"). Css ("display", "none") и то же самое для # Menu1Movie.

Если событие даже не сработало (не знаю, почему это так, но просто наверняка), вам следует попытаться переопределить CSS для # Xmovie1, наверняка подняв его, например. с положением: абсолютный + z-индекс.