video keeps playing after close modal-CodePudding

I want my code to play a video but when I close the modal the music in the video still plays on the background.

<div  id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div  role="document">
        <div >
            <div >
                <button type="button"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>       
                <!-- 16:9 aspect ratio -->
                <div >
                    <iframe  src="" id="video"  allowscriptaccess="always" allow="autoplay"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

I tried using jquery to fix it but nothing happens.

 $(document).ready(function () {
    var $videoSrc;
    $('.btn-play').click(function () {
        $videoSrc = $(this).data("src");
    });
    console.log($videoSrc);

    $('#videoModal').on('shown.bs.modal', function (e) {
        $("#video").attr('src', $videoSrc   "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
    })

    $('#videoModal').on('hide.bs.modal', function (e) {
        $("#video").attr('src', $videoSrc);
    })
});

CodePudding user response：

To do what you require you can either stop or pause the video playing when the hide.bs.modal event fires.

You can do this by sending a postMessage to the iframe containing the embedded Youtube player. Note that the enablejsapi=1 parameter has to be included in the embed URL for this to work.

Here's a simplified example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div><a href="#" >Play Video</a></div>
<div><a href="#" >Stop Video</a></div>
<div><a href="#" >Pause Video</a></div>

<iframe  id="video" width="560" height="315" src="https://www.youtube.com/embed/LDU_Txk06tM?enablejsapi=1&version=3&playerapiid=ytplayer" allowscriptaccess="always" allow="autoplay"></iframe>

let videoIframeContent = $('#video')[0].contentWindow;

// stop 
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "stopVideo" }), '*');

// pause
videoIframeContent.postMessage(JSON.stringify({"event": "command", "func": "pauseVideo" }), '*');

Here's a working demo in a jsFiddle and the snippet editor is sandboxed and won't allow video.

CodePudding user response：

That's because the video wasn't stopped.

In the listener that listens to the hide.bs.modal event:

const video = $('#video').get(0);
video.pause();
video.currentTime = 0;

CodePudding user response：

I think You need to use video tag instead of iframe to control video follow link

CodePudding user response：

You can try setting the src attribute to an empty string in the function that hides the modal. This will make sure there is no extra playback while the modal is hidden.

Here is a working preview with little modifications to your code so it works in the online editor.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Import the jquery javascript file -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <div  id="videoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div  role="document">
      <div >
        <div >
          <button type="button"  id="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
          <!-- 16:9 aspect ratio -->
          <div >
            <iframe  src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      var $videoSrc =
        "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4";

      console.log($videoSrc);

      $("#video").attr(
        "src",
        $videoSrc   "?autoplay=1&amp;modestbranding=1&amp;showinfo=0"
      );

      document.getElementById("close").addEventListener("click", function() {
        $("#video").attr("src", "");
        document.getElementById("videoModal").style.display = "none";
      });
    });
  </script>
</body>

</html>