Stop YouTube Video when closing modal

Question

Here is my markup. I'm not sure what i need to do to get the video to stop playing when i close the modal. It stops playing just fine in chrome, but in firefox the video keeps playing in the background.

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">

            <iframe id="iframeYoutube" width="854" height="480"  src="https://www.youtube.com/embed/TFpFJeWOvZg?rel=0" frameborder="0" allowfullscreen></iframe> 

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

<script>
  $(document).ready(function(){
  $("#myModal").on("hidden.bs.modal",function(){
    $("#iframeYoutube").attr("src","#");
  })
})

function changeVideo(vId){
  var iframe=document.getElementById("iframeYoutube");
  iframe.src="https://www.youtube.com/embed/"+vId;

  $("#myModal").modal("show");
}
</script>

score 5 · Answer 1 · answered Nov 28 '17 at 17:42

please try this way..

$(document).ready(function(){
    /* Get iframe src attribute value i.e. YouTube video url
    and store it in a variable */
    var url = $("#cartoonVideo").attr('src');
    
    /* Assign empty url value to the iframe src attribute when
    modal hide, which stop the video playing */
    $("#myModal").on('hide.bs.modal', function(){
        $("#cartoonVideo").attr('src', '');
    });
    
    /* Assign the initially stored url back to the iframe src
    attribute when modal is displayed again */
    $("#myModal").on('show.bs.modal', function(){
        $("#cartoonVideo").attr('src', url);
    });
});

 .bs-example{
     margin: 20px;
    }
    .modal-content iframe{
        margin: 0 auto;
        display: block;
    }

<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

The code you shared works great if I have one button to click on the page and I don't know how to adapt your code to work with three videos. Look here: http://mattbastian.com/imaginuiti/ — M. Bastian, Nov 28 '17 at 19:56
Haha nevermind I just figured it out i just had to append $("#myModal").on('hide.bs.modal', function(){ $("#iframeYoutube").attr('src', ''); }); to the end of my javascript — M. Bastian, Nov 28 '17 at 20:01

score 0 · Answer 2 · answered Apr 05 '19 at 14:39

0

Here I have answered a similar question in this thread. I make use of the event event.relatedTarget and the attribute HTML data-* attribute to play and stop the video when the modal is opened and close.

answered Apr 05 '19 at 14:39

DanielBlazquez

1,045
1
13
22

Stop YouTube Video when closing modal

2 Answers2