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>
  <div class="modal-body">
      <div style="position:relative;height:0;padding-bottom:56.21%" id="video"><iframe src="https://www.youtube.com/embed/RQaVzbxZqXY?ecver=2" 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;">
      <ul>
          <li>Gandhar Pathwardhan</li>
          <li>Sachin Nandgirwar</li>
          <li>Faisal Amdani</li>
      </ul>
      </div>
  </div>
  <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>

  </div>
</div>

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”);
$("#video").show(“slow”);
})
})

how can i do it any help

@bartekkustra can you help.

this is the code that works for mine…

<script>

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

</script>

“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…

2 Likes

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');
            e.preventDefault();
            $('.modal iframe').attr('src', videoURL);
            $('.modal').toggleClass('is-visible');
        });

// 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) {
        
       e.preventDefault();
       $('.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() {
        document.body.style.overflow = 'hidden';
        document.querySelector('html').scrollTop = window.scrollY;
    }
    
    function enableScroll() {
        document.body.style.overflow = null;
    }

    function addEl() {
        overLayDiv = document.createElement('div');
        newClass1 = overLayDiv.classList.add('modal-backdrop');
        newClass2 = overLayDiv.classList.add('fade');
        newClass3 = overLayDiv.classList.add('show');
        document.body.append(overLayDiv);
    }
    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);
        }
    }

    loopPostType(teamMemberModal);
    loopPostType(partnerModal);

    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');
                e.preventDefault();
                $('.popUpVid').attr('src', videoURL);
                idValue.classList.remove('hidden');
                disableScroll();
            });
        }

        close.forEach(function(el) {
            el.addEventListener('click', function(e) {
                e.preventDefault();
                $('.popUpVid').attr('src', '');
                idValue.classList.add('hidden');
                enableScroll();
            });
        });
    }
1 Like