Как поставить видео на паузу при закрытии модального окна?

Question

[Виктор Викторов]

Имеется Bootstrap модалка, в которой видео, обычное, не с Youtube, как по закрытии окна средствами JS остановить или поставить на паузу это видео? Таких модалок и видео в них - 5 шт на странице. Вот структура:

<div class="modal fade video" id="video-1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="row justify-content-center">
      	<video controls="controls">
				<source src="/wp-content/uploads/video/video-1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
			</video>
      </div>
    </div>
  </div>
</div>

Answer 1

[0xD34F]

Подписаться на событие закрытия окна, найти видео внутри, остановить:

$(document).on('hide.bs.modal', '.video', function() {
  $('video', this).get(0).pause();
});

Comments

[Виктор Викторов]

Кратко, просто и заработало, а то я уже костыли чуть было не начал делать. Спасибо!!!