How do I stop the video when I close Modal?

Asked

Viewed 925 times

2

When I close the modal the video keeps playing, as I do for the video to stop 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>
  <script src="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

  • This may help you: https://answall.com/a/299376/8063

  • If you do not use the youtube api to be able to access the video controls, one possibility is you save the video src in a data-src and when the modal opens, you arrow the iframe src. When you close, you remove src from iframe. This is not the best alternative as it is not a pause feature. I recommend reading the documentation and working with the api: https://developers.google.com/youtube/iframe_api_reference?hl=pt-br#pauseVideo

1 answer

1

As the method stopVideo suggested in the comments is no longer working (it didn’t work for me, the browser accuses method not found), because probably the youtube API must have changed or something like, here’s 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, and the most important are 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 is at the click of the button PAUSE, you can change to the click of the button close your modal.

    <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>
    <button id="play">PLAY</button>
    <button id="pause">PAUSE</button>

Browser other questions tagged javascript html5 css3 twitter-bootstrap

You are not signed in. Login or sign up in order to post.