<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
    
            <div class="modal-body" id="yt-player">
               <iframe width="560" height="315" src="https://www.youtube.com/embed/rrT6v5sOwJg" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

<div class="container">
<div class="jumbotron">
  <div class="row">
    <div class="col-sm-12 text-center">
    <h3>How to stop YouTube video on modal close</h3></div>
  <div class="col-sm-4 col-sm-offset-4 text-center">
    <button class="btn btn-lg btn-primary "  role="button" data-toggle="modal" data-target="#myModal"><i class="fa fa-play"></i> View Video</button></div></div></div></div>
.jumbotron { margin:100px auto;}

iframe {width:100%;  min-height:300px;}

   $("#myModal").on('hidden.bs.modal', function (e) {
        $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
    });
Run Pen

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js