javascript - VideoJS video does not stop when closing bootstrap modal

Question

I have a modal on my website which contains a video. When I click the modal away (click on the background outside of the modal, close button etc.) the modal is closed but the video is still running in the background.

I have tested all solutions I found on stackoverflow but nothing seemed to work.

Here is my html (perhaps not the nicest code):

$('.modal').on('hidden.bs.modal', function() {
  $('video').each(function() {
    this.player.pause();
  });
})

<div class="modal fade" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="tutorialModal" aria-hidden="true" style="z-index:99999;">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content" style="-webkit-box-shadow: 4px 4px 14px -2px rgba(0,0,0,0.75); -moz-box-shadow: 4px 4px 14px -2px rgba(0,0,0,0.75); box-shadow: 4px 4px 14px -2px rgba(0,0,0,0.75); min-width:750px !important">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"><img src="../images/logo.svg" height="60px"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h4>Lorem ipsum!</h4>
        <p>Lorem ipsum.</p>
        <br>
        <center>
          <div style="width:500px;border-style:solid;border-color:#fafaf9">
            <video id="highlightfilter" class="video-js vjs-fluid" controls preload="auto" width="555" height="300" poster="../videos/tutorial_thumbnail.png" data-setup='{}'>
              <source src="../videos/tutorial.mp4" type="video/mp4">
            </video>
          </div>
        </center>
        <p>Some text... Text leads to a <a href="../link">link</a>.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

this.player is some jquery thing?

I am having defaulting seeing where you had trouble so I show the trivial example.

See also https://www.w3schools.com/tags/av_met_pause.asp

document.querySelectorAll('video').foreEach(HTMLVideoElement.prototype.pause)

document.querySelectorAll('whatever').forEach(console.error)

If you can elaborate further on how my response would otherwise help you I will attempt to improve it.