BS3 Stop video on modal close

by freedawirl

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<span class="main_video">
<a data-toggle="modal" href="#video1" style="cursor:pointer">
Video
</a>
</div>

<a href="#video1" class="video-control" role="link" data-toggle="modal" data-target="#video1">TwoTimer</a>
                



<div id="video1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="videoLabel" aria-hidden="true">
<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>
  </div>
  <div class="modal-body" id="yt-player">
  <iframe src="https://www.youtube.com/embed/8HAO1TlfXgQ"  width="100%" frameborder="0" height="100%" allowfullscreen=""></iframe>
                
</div>
</div>
    </div>

CSS

/*Modal*/
 .modal-dialog {
}
.modal-dialog iframe {
    width: 100%;
    height: 567px;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-header {
    min-height: 16.43px;
    padding: 0px;
    border: none;
    background: transparent;
}
.modal-header .close {
    margin-top: 0px;
    padding: 0;
    cursor: pointer;
    background: #000;
    color: #fff;
    font-size: 40px;
    font-weight: 100;
    display: block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: relative;
    right: -30px;
    top: 15px;
    z-index: 9;
    filter: alpha(opacity=100);
    opacity: 1;
}
.modal-body {
    padding: 0px;
}
.modal-content {
    background:transparent;
    background-clip: padding-box;
    border: none;
    border-radius: 0px;
    outline: 0;
    box-shadow:none;
}
.modal-footer {
    display:none;
}

JavaScript

$('#video1').on('hidden.bs.modal', function () {
        callPlayer('yt-player', 'stopVideo');
    });