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


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', '');


This too worked for me. I did have to adjust a little bit because my build has multiple modals per page, each modal has a video as well so I had to get creative to be able to re-populate the correct video for each modal.

I attached a data-videosrc attribute containing the video URL to the actual button that opens each modal. This allowed me to pull the URL and populate the modal each time the button was clicked.

This implementation works for both Vimeo and Youtube

    var cat = document.querySelectorAll('.sf-level-0');
    var close = document.querySelectorAll('.close');
    var modalTarget = document.querySelectorAll('.modalTarget');
    var teamMemberModal = document.querySelectorAll('.teammember-modal');
    var partnerModal = document.querySelectorAll('.partners-modal');
    var overLayDiv, newClass1, newClass2, newClass3;

    function disableScroll() { = 'hidden';
        document.querySelector('html').scrollTop = window.scrollY;
    function enableScroll() { = null;

    function addEl() {
        overLayDiv = document.createElement('div');
        newClass1 = overLayDiv.classList.add('modal-backdrop');
        newClass2 = overLayDiv.classList.add('fade');
        newClass3 = overLayDiv.classList.add('show');
    function removeEl() {
        newClass1 = overLayDiv.classList.remove('modal-backdrop');
        newClass2 = overLayDiv.classList.remove('fade');
        newClass3 = overLayDiv.classList.remove('show');

    function loopPostType(postType) {
        for(let j = 0; j < postType.length; j++) {
            postType[j].setAttribute("id", "modal-" + j);


    for(let i = 0; i < modalTarget.length; i++) {
        modalTarget[i].classList.add('modal-' + i);
        let idValue = document.getElementById('modal-' + i);
        let classValue = modalTarget[i].classList.value;

        if(classValue = idValue.getAttribute('id')) {
            modalTarget[i].addEventListener('click', function(e) {
                var videoURL = this.getAttribute('data-videosrc');
                $('.popUpVid').attr('src', videoURL);

        close.forEach(function(el) {
            el.addEventListener('click', function(e) {
                $('.popUpVid').attr('src', '');
1 Like

Can someone take a look at my preview link to see what I’m doing wrong? I tried it a few ways and none of them seem to work. I have a close div (.click-close) that is behind the youtube container which closes the module. I just need to somehow make it so when that’s clicked, the video pauses/stops so the audio doesn’t keep going.

Hi, Looks like it is what I am looking for. Can you share the html and css to better understand how it is structured ? thanks