How do I stop the video when I close Modal?

Question

How do I stop the video when I close Modal?

Navigation

#1 by (2 votes)

3

When I close the modal the video continues to play, how do I stop the video when I close the modal?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/soB_zeZhVc0"frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>

javascript html5 css3 twitter-bootstrap

asked by anonymous 03.08.2018 / 20:49

1 answer

Custom password window for the same page Save information if user exits the page

score 2 · Answer 1

As the stopVideo method suggested in the comments is no longer working (it did not work for me, the browser accuses method not found), because probably the youtube API must have changed or something, here is a version that worked for my case.

In the video url it is necessary to inform the parameters ?rel=0&modestbranding=1&fs=0&controls=0&autoplay=1&showinfo=0&version=3&enablejsapi=1 , the most important being version and enablejsapi .

Example:

<iframe id="meuVideo" src="https://www.youtube.com/embed/video_id?rel=0&modestbranding=1&fs=0&controls=0&autoplay=1&showinfo=0&version=3&enablejsapi=1"width="560" height="315" frameborder="0"></iframe>

Below is the function that can start or stop the video, which in case it is at the click of the PAUSE button, you can change to the click of the button to close its modal.

<button id="play">PLAY</button>
<button id="pause">PAUSE</button>

<script>
    $('#play').click(function() {
        $('#meuVideo').each(function(){ 
            var frame = document.getElementById("meuVideo");
            frame.contentWindow.postMessage(
                '{"event":"command","func":"playVideo","args":""}', 
                '*'); 
        });
    });

    $('#pause').click(function() {
        $('#meuVideo').each(function(){ 
            var frame = document.getElementById("meuVideo");
            frame.contentWindow.postMessage(
                '{"event":"command","func":"pauseVideo","args":""}',
                '*'); 
        });
    });
</script>