Streaming live at 10am (PST)

How to stop youtube video after closing modal

i have youtube video in my modal but when i close the modal the youtube video runs in background in audio mode how can i stop it.

    <h5 class="modal-title" id="exampleModal">Modal title</h5>
  <div class="modal-body">
      <div style="position:relative;height:0;padding-bottom:56.21%" id="video"><iframe src="" style="position:absolute;width:100%;height:100%;left:0" width="641" height="360" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></div>
      <div id="syllabus" style="padding: 10px;">
          <li>Gandhar Pathwardhan</li>
          <li>Sachin Nandgirwar</li>
          <li>Faisal Amdani</li>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" id="vid">Video</button>
              <button type="button" class="btn btn-primary" id="syl">Syllabus</button>


this is my modal code
also my jquery code is

(document).ready(function() { ("#video").show();
("#syllabus").hide(); ("#syl").click(function(){
("#syllabus").show("slow"); ("#video").hide(“slow”);
("#vid").click(function(){ ("#syllabus").hide(“slow”);

how can i do it any help

@bartekkustra can you help.

this is the code that works for mine…


  $('.close-modal').click(function(e) {
    $('.video-embed').children('iframe').attr('src', '');


“close-modal” is the close button and “video-embed” is the actual video embed element. Replace with your relevant names. The code basically removes the source from the iFrame so there is nothing to play any more. Hope this helps…


This code snippet was super helpful and easy to implement. Now what I’m wondering is if there’s a way, after clicking the modal closed, you can reload the video. Would be really great if you could open the modal again and start the video again. This code seems to permanently remove the iframe.

Any ideas?

Good point, I am wondering as well. How to replay it once more we bring that popup back.

// You can do something like this on model click append the URL of youtube

 $('.modal-toggle').on('click', function(e) {
            videoURL = $(this).attr('data-videosrc');
            $('.modal iframe').attr('src', videoURL);

// And on close you can remove the URL this way it will get appended again if the user click on the model button again

   $('.modal-close').on('click', function(e) {
       $('.modal iframe').attr('src', '');