How do I get the HTML5 Video pause() method to work?

I have a HTML video with a DIV containing custom controls over it.

The play button works perfectly fine, but the pause button does not. There are two wird things:

1. The media.pause() method just does not seem to work at all, like it would not even be there.
2. The .addClass() and .removeClass() after media.pause() are not working either, but when I put console.log('anything'); below it in the code, it prints in the console. Also the objects that it is called on are there (console.log-ed it).

// play video
$('.funnel-video-poster').on('click', function() {

  var video_id = $(this).data('video-id');

  document.getElementById(video_id).play();

  $(this).find('.FVP-btn-play').addClass('hidden');
  $(this).find('.FVP-btn-pause').removeClass('hidden');
});

// pause video
$('.FVP-btn-pause').on('click', function() {

  var $poster = $(this).closest('.funnel-video-poster'),
    video_id = $poster.data('video-id');

  var media = document.querySelector('#' + video_id);
  media.pause();

  console.log(media);

  $poster.find('.FVP-btn-play').removeClass('hidden');
  $poster.find('.FVP-btn-pause').addClass('hidden');

  console.log($poster.find('.FVP-btn-play'));
  console.log($poster.find('.FVP-btn-pause'));
});

.funnel-block .funnel-video video {
    display: block;
    margin: 0 auto;
}

.funnel-block .funnel-video .funnel-video-poster {
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.funnel-block .funnel-video .funnel-video-poster.see-thru {
    background: transparent !important;
}

.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    background: #3c3c3c;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 50%;
}

.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {    
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    background: #3c3c3c;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    bottom: .25rem;
    left: 50%;
    transform: translate(-50%, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funnel-block">


  <div class="py-5 funnel-video">
    <video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
      <source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
      Your browser does not support HTML 5 video
    </video>
    <div class="funnel-video-poster see-thru" data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
      <div class="FVP-btn-play hidden">Play</div>
      <div class="FVP-btn-pause">Pause</div>
    </div>
  </div>
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/HOGBID2