I'm having an issue with Youtube continuing to play after closing a modal. I know this is not a unique problem and I have done exhaustive research to find answers. Unfortunately nothing has worked. I have tried it all!

Here is what I currently have:

<div class="lightbox" id="box-books">
  <div class="box-bg">
   <a href="#page" class="close">X</a>
   <iframe id="playerid" class="center" width="80%" height="600px" 
   list=PLUgadhOLCi0T6NfoVWSBOIsHbkhD_I8Vs" frameborder="0" 
   webkitallowfullscreen mozallowfullscreen allowfullscreen 
   allow="autoplay; encrypted-media" allowtransparency="true"></iframe>

 $('.action-close').on('click', function() {
  var video = $("#playerid").attr("src");

Any thoughts? At this point I am desperate and frustrated. Thank you in advance!

  • $("#playerid").stopVideo(); does that function stop it? Apr 16, 2020 at 13:24
  • Nope. The strange thing is, I was using the code below to cut off the audio for a soundsgood playlist and that was working just fine. But when I try to apply the same code to a youtube video, it fails.
    – Amanda
    Apr 17, 2020 at 14:06
  • 3
    I’m voting to close this question because it's not Magento related Apr 28, 2023 at 17:48

1 Answer 1


I figured it out, using bootstrap thanks to some help from this site.

Here is the script:

<script>jQuery(document).ready(function($) {
  //Snag the URL of the iframe so we can use it later
  var url = $('.modal-body-music iframe').attr('src');

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

  $('.close').click(function() {
    $('.modal-body-music iframe').attr('src', url);

And the HTML:

<div id="box-music" class="modal fade">
    <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>
                <h2 align="center" class="lightbox-content">A Musical Moment</h2>       
            <div class="modal-body-music">
                <div style="clear:both;margin-top:70px;">
  • You can mark sure answer, if its correct. Apr 17, 2020 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.