2

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>

I found different scripts, mostly something like (I put the code before the closing body tag):

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

But nothing works... Do you have an idea?

Thanks a lot!

Hulotte

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Hulotte
  • 21
  • 1
  • I found my own solution in the meantime: Add this code and the video pauses when closed: `` See also: https://stackoverflow.com/questions/5958132/javascript-to-stop-html5-video-playback-on-modal-window-close – Hulotte Feb 24 '22 at 19:18

1 Answers1

-1

no needs ".player"

 $('.modal').on('hidden.bs.modal', function () {
    $('video').each(function() {
      this.pause();
    });
})
Mehran Hooshangi
  • 7
  • 2