Stop Youtube Video When Close Modal

Question

I've got a modal that opens a Youtube video. The modal is set to open whenever you reset the session.

I'm trying to make it so that when you close the modal (either by hitting the "x" or by clicking anywhere outside the modal) the youtube video stops playing, but I'm at a loss.

Here's my code so far:

//resetting/refreshing the session:
jQuery(document).ready(function(){
if (sessionStorage.getItem("story") !== 'true') {
  sessionStorage.setItem("story", "true");
  $("#myModal").modal();
  }

$('#reset-session').on('click',function(){
sessionStorage.setItem('story','');
});
});

//my attempt at stopping the video:

function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
    var div = document.getElementById("myModal");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    div.style.display = state == 'hide' ? 'none' : '';
    func = state == 'hide' ? 'pauseVideo' : 'playVideo';
    iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
}

 body {
    background-color: #335C64; 
    margin:10px;
 }
 

    h4 {
      color: #FFD5C2;
  }

  .desc {
    color: #FFD5C2;
    margin-bottom: 4px;
    }
  .btn-sm {
    margin-bottom: 15px;
  }

   
 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<h4>Bootstrap Modal with SessionStorage</h4>
<hr />
<p class="desc">
  Click this button to <strong>Refresh</strong> the page.
</p>
<a href="" id="refresh-page" class="btn btn-info btn-sm">
  Refresh Page
</a>

<p class="desc">
  Click this button to <strong>Reset</strong> and <strong>Refresh</strong> the page. 
</p>
<a href="" id="reset-session" class="btn btn-warning btn-sm">
  Reset Session
</a>

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title text-primary">Victor Frankenstein</h4>
</div>
<div class="modal-body">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VZzZKuQUguk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> Close </button>
</div>
</div> 
</div> 
</div>

Here's a codepen: https://codepen.io/jackcode1/pen/ZEpbRQq

user1580462 user1580462 · Accepted Answer · 2020-12-04T18:18:29

I found an easy, perhaps too easy, solution:

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

That's it. I guess I was over complicating this.

Stop Youtube Video When Close Modal

1 Answers