Stop and auto-play videos after a modal open or closed

January 20, 2023March 3, 2023 admin

This tutorial is about how to stop the video in a bootstrap modal from playing in the background after you close the bootstrap modal box. Use this code to stop playing videos embedded in Bootstrap modals when the modal box is closed. Stop or pause the video when you close the modal window and also auto-play video in it when it’s triggered.

Stop video playing when Bootstrap modal is closed and auto-play videos after a modal open.

Below are the live demo of bootstrap modal which contain video files. After click on the thumbnail modal popup is open and video will be start playing and after closed the modal video also stopped.

To Play Video in the bootstrap modal popup which takes the following steps:-

Include the CSS and JS file of bootstrap.
Give the unique id name of modal popup and write JavaScript for on load show modal popup at to bottom of the page.
Copy the enter popup code and paste inside the page bottom just above the JS files.

HTML

<!-- Video 1 -->
<a data-toggle="modal" data-title="video 1" data-video="https://smartlearningtutorials.com/video/dummy.mp4" href="#video1">
<div class="thumbIcon"><i class="fas fa-video"></i> Video 1</div>
</a>

<!-- Video 2 -->
<a data-toggle="modal" data-title="video 2" data-video="https://smartlearningtutorials.com/video/dummy.mp4" href="#video2">
<div class="thumbIcon"><i class="fas fa-video"></i> Video 2</div>
</a>

<!-- Modal 1 -->
<div class="modal fade" id="video1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Video 1</h4>
          </div>
          <div class="modal-body modalVideo">
            <video id="video-1" controls class="embed-responsive-item">
                <source src="https://smartlearningtutorials.com/video/dummy.mp4" type="video/mp4">
            </video>
          </div>
        </div>
    </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="video2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Video 2</h4>
          </div>
          <div class="modal-body modalVideo">
            <video id="video-2" controls class="">
                <source src="https://smartlearningtutorials.com/video/dummy1.mp4" type="video/mp4">
            </video>
          </div>
        </div>
    </div>
</div>

JavaScript

<script type="text/javascript">
$(document).ready(function(){
  // Video 1
  $('#video1').on('shown.bs.modal', function (event) {
    $('#video-1')[0].play();
  });
  $('#video1').on('hidden.bs.modal', function (event) {
    $('#video-1')[0].pause();
  });

  // Video 2
  $('#video2').on('shown.bs.modal', function (event) {
    $('#video-2')[0].play();
  });
  $('#video2').on('hidden.bs.modal', function (event) {
    $('#video-2')[0].pause();
  });
});
</script>

Example

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>On page load show Modal Popup !</h1>

    <!-- Video 1 -->
    <a data-toggle="modal" data-title="video 1" data-video="https://smartlearningtutorials.com/video/dummy.mp4" href="#video1">
    <div class="thumbIcon"><i class="fas fa-video"></i> Video 1</div>
    </a>

    <!-- Video 2 -->
    <a data-toggle="modal" data-title="video 2" data-video="https://smartlearningtutorials.com/video/dummy.mp4" href="#video2">
    <div class="thumbIcon"><i class="fas fa-video"></i> Video 2</div>
    </a>

    <!-- Modal 1 -->
    <div class="modal fade" id="video1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Video 1</h4>
              </div>
              <div class="modal-body modalVideo">
                <video id="video-1" controls class="embed-responsive-item">
                    <source src="https://smartlearningtutorials.com/video/dummy.mp4" type="video/mp4">
                </video>
              </div>
            </div>
        </div>
    </div>

    <!-- Modal 2 -->
    <div class="modal fade" id="video2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Video 2</h4>
              </div>
              <div class="modal-body modalVideo">
                <video id="video-2" controls class="">
                    <source src="https://smartlearningtutorials.com/video/dummy1.mp4" type="video/mp4">
                </video>
              </div>
            </div>
        </div>
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://smartlearningtutorials.com/js/jquery-3.2.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      // Video 1
      $('#video1').on('shown.bs.modal', function (event) {
        $('#video-1')[0].play();
      });
      $('#video1').on('hidden.bs.modal', function (event) {
        $('#video-1')[0].pause();
      });

      // Video 2
      $('#video2').on('shown.bs.modal', function (event) {
        $('#video-2')[0].play();
      });
      $('#video2').on('hidden.bs.modal', function (event) {
        $('#video-2')[0].pause();
      });
    });
    </script>
  </body>
</html>

Stop video playing when the Bootstrap modal is closed?

When you close the modal popup, the audio from the video is still playing on the background and need to stop or pause.

Do you know how to stop a video from playing after you close a modal that contains it?

Referee this tutorial for stop playing videos embedded in Bootstrap modals when the modal is closed. When you have added an HTML5 video inside the modal and after close the modal, the video keeps playing on the background, this is a very common issue facing every time when we are embedded video in a modal popup. This is the best example of how to pause a video or audio contained in a bootstrap-modal to prevent further hearing when the modal window is closed. , the audio from the video is stop or pause when close the modal window. $(‘.modal-iframe-youtube’).click(function(e) {}. This tutorial is about how to stop video from playing in the background after you close the bootstrap modal popup.

Demo

Stop video playing when the Bootstrap modal is closed?

You May Also Like

Disable print option using JavaScript

Responsive Mega Menu | Bootstrap Mega Menu Tutorials

Load more data on button click using jQuery