Bootstrap视频模态框点击播放即关闭问题求助

Problem #

I'm using HTML/CSS with Bootstrap to build video modals, but I've hit a snag: when I click the play button on the video inside the modal, the modal closes right away. What I want is for users to be able to play the video and interact with its controls normally, with the modal only closing when they click the background area outside the video.

Here's my current code:

HTML

<h5>Explainer Videos</h5>
<p>Check out our videos below taken from one of our recorded webinars to see if this certification is right for you:
<ul class="nobullet">
  <li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-1">See what our online course looks like</a></li>
  <li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-2">Sample lessons</a></li>
</ul>
<br/>
</p>
<div class="modal fade" id="flitpc-video-1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content-vid">
      <div class="modal-body">
        <video id="flitpcdemo" controls autoplay width="100%">
          <source src="./video2.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="flitpc-video-2">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content-vid">
      <div class="modal-body">
        <video id="flitpcdemo" controls autoplay width="100%">
          <source src="./video2.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</div>

CSS

.modal-content-vid{
  background: transparent !important;
  border: none !important;
}

Solution #

The core issue here is that you replaced Bootstrap's default .modal-content class with a custom .modal-content-vid class. Bootstrap's modal JavaScript relies on the .modal-content selector to identify which areas are part of the modal's interactive content—clicks inside this area shouldn't trigger a modal close. Since your modal lacks this class, clicks on the video are being interpreted as "outside the modal content," which triggers the close action.

Here are two straightforward fixes:

Fix 1: Restore Bootstrap's Required .modal-content Class

Keep Bootstrap's standard modal structure by adding the .modal-content class back (you can keep your custom class alongside it for styling):

Updated HTML

<div class="modal fade" id="flitpc-video-1">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <!-- Add .modal-content back, retain your custom class -->
    <div class="modal-content modal-content-vid">
      <div class="modal-body">
        <video id="flitpcdemo-1" controls autoplay width="100%"> <!-- Fixed duplicate ID! -->
          <source src="./video2.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="flitpc-video-2">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content modal-content-vid">
      <div class="modal-body">
        <video id="flitpcdemo-2" controls autoplay width="100%"> <!-- Fixed duplicate ID -->
          <source src="./video2.mp4" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</div>

Note: I also fixed the duplicate id="flitpcdemo" on both videos—IDs must be unique across your HTML to avoid unexpected issues with JavaScript or CSS targeting.

Fix 2: Stop Event Bubbling on the Video Element

If you want to keep your custom class structure, you can prevent the click event from bubbling up to the modal's close handler with a bit of JavaScript:

// Target all videos inside modals
document.querySelectorAll('.modal video').forEach(video => {
  video.addEventListener('click', function(e) {
    // Block the click event from reaching the modal's close logic
    e.stopPropagation();
  });
});

This ensures clicks on the video (including play/pause controls) don't trigger a modal close, while still letting users close the modal by clicking the background.

Bonus Tip #

To improve user experience, add a listener to pause the video when the modal closes:

// Pause video when modal is closed
document.querySelectorAll('.modal').forEach(modal => {
  modal.addEventListener('hidden.bs.modal', function() {
    const video = this.querySelector('video');
    if (video) video.pause();
  });
});

内容的提问来源于stack exchange，提问作者BruceyBandit