Div does not dissapear with onclick event on mobile?

Question

when i click on the playbutton / div on my desktop it is dissapearing the div videotekst but when I click on the div on my mobile the div videotekst is not dissapearing.

Here is my code i am using:

<div class="overInreach">    <video id="my-video" class="video-js" controls preload="auto" width="100%" height="427px"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}" onended="videoEnded()">
    <source src="<?php echo get_template_directory_uri(); ?>/images/Inreach_Promo_v2.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>    <script>
        $(document).ready(function ()
        {
            $(".vjs-big-play-button").click(function ()
            {
                $("#videotekst").css("z-index", "-1");
        $(".vjs-big-play-button").css("display", "none !important");
        $(".vjs-control-bar").css("display", "flex !important");
            });
            $(".vjs-poster").click(function ()
            {
                $("#videotekst").css("z-index", "-1");
        $(".vjs-big-play-button").css("display", "none !important");
        $(".vjs-control-bar").css("display", "flex !important");
            });
        });
    </script>

    <script>
function videoEnded() {
    $("#videotekst").css("z-index", "1");
    $(".vjs-big-play-button").css("display", "block");
    $(".vjs-control-bar").css("display", "none");
}
    </script>

Answer 1

Because, in mobile there is not click event. there are touchStart and touchEnd events are there:

So can try like :

var clickHandler = ('touchend' in document.documentElement ? "touchend" : "click");

$(".vjs-big-play-button").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});