Youtube video in modal - Can't stop sound after closing

AlexG · 2018-02-20 21:59:20 UTC

Hi,

I have made a personal website with numerous modals that include youtube videos. Unfortunately when the modal is closed, the youtube video continues to play (i.e. can still be heard). Hoping someone can help with script to prevent this. There is a fair bit of code available on google but I haven’t been able to adapt it. I used a W3schools modal and styled it a little, mainly just by making the modal box transparent and changing the close button (looked pretty nice and sparse in the end I thought, just in case anyone would like to use it). The code below is simplified but has a few of the modals/videos and demonstrates the issue. I should confess that while I have learned a fair amount of HTML and CSS, I’m yet to embark on javascript so I’m out of my depth here but would be fantastic if someone can help to get this particular problem out of the way. Many thanks.

<!DOCTYPE html>
<html> 
   <head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    
    <style> 
        
    /*Removed modal box, i.e. background and border*/
   .modal-content {
      background-image: transparent;
      margin: 15% auto; /*5% from top and centered*/
      padding: 0px 0px 0px 0px;
      width: 560px; 
      height: 315px; /*Matches width and height of iframe but made transparent*/
    } 
   .close {
      color: #aaa;
      float: right;
      font-size: 18px;
      color: #FFFFE0;
    }
    .close:hover, .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

	</style>      
  
  
<body>
    <!--trigger modal--> 
            <a class="dropdownlink" onclick="document.getElementById('id01').style.display='block'">Coming Down From Rising Fawn</a>
              <!--modal-->
              <div id="id01" class="w3-modal w3-animate-opacity">
                <!--modal content-->
                <div class="modal-content">
                  <span onclick="document.getElementById('id01').style.display='none'" class="close">&times;</span>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/NCHEpoob-pE" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
                  </iframe>
                </div>
              </div>
          
    <br/>
    <br/>
    
            <!--trigger modal--> 
            <a class="dropdownlink" onclick="document.getElementById('id02').style.display='block'">Give Me Back My 15 Cents</a>
              <!--modal-->
              <div id="id02" class="w3-modal w3-animate-opacity">
                <!--modal content-->
                <div class="modal-content">
                  <span onclick="document.getElementById('id02').style.display='none'" class="close">&times;</span>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/0VMvU7NYWd0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
	              </iframe>	
                </div>
              </div>
    <script>
/*Get modal*/
    var modalA = document.getElementById('id01');

    var modalB = document.getElementById('id02');
    
    /*Close on clicking outside modal*/
window.onclick = function(event) {
  
    if (event.target == modalA) {
        modalA.style.display = "none";
    } 
    if(event.target == modalB) {
        modalB.style.display = "none";      
     }
}
    </script>
    
</body>
    
</html>

randelldawson · 2018-02-20 22:54:50 UTC

Create a function like:

function stopVideo(modal) {
  var currentIframe = modal.querySelector('.modal-content > iframe');
  currentIframe.src = currentIframe.src;
}

and call it with the applicable modal after hiding it.

modalA.style.display = "none";
stopVideo(modalA);

AlexG · 2018-02-21 18:13:20 UTC

Hi Randell,

Thanks for this. I just pasted the code in and no luck but this is perhaps because I don’t have a proper understanding of javascript and have put in the wrong spot or used incorrect references. I’ll come back to the issue and your proposed solution once I’ve gone through some javascript courses.

Cheers, Alex

randelldawson · 2018-02-21 18:19:12 UTC

If you post a link to your code (Codepen or JSFiddle), I can take a look at what you have tried to implement.

AlexG · 2018-02-21 18:55:17 UTC

Hi,

I tried to put it in Codepen but didn’t seem to work. Perhaps something to do with the stylesheet. Here it is in JSFiddle. Your code is included down the bottom of the script. Many thanks. Regards, Alex

https://jsfiddle.net/alxgiordano/br8kdg7y/1/

randelldawson · 2018-02-21 19:00:25 UTC

The call to the function must take place in the part of your code where you check if the event.target is equal to ModalA. In my original reply, I said you will have to put the code after you hide it. I was referring to the following line:

modalA.style.display = "none";

You put the call to the function outside in the global scope. It still stops the video on page load, but is not affected by the click event.

AlexG · 2018-02-22 17:29:54 UTC

HI again Randall,

Just to say thanks very much for solving this problem for me. I have placed your script in the appropriate places to get the videos/sound to stop when hitting the ‘x’ button or outside of the modal. Won’t ask any further questions re javascript until I’ve schooled myself in it but this was extremely helpful and I can now roll out to 50 odd other videos/modals and finally get my personal site looking the way I envisaged. Many thanks! For reference, the code with your suggested script is below. Cheers, Alex

<!DOCTYPE html>
<html> 
   <head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    
    <style> 
        
    /*Removed modal box, i.e. background and border*/
   .modal-content {
      background-image: transparent;
      margin: 15% auto; /*5% from top and centered*/
      padding: 0px 0px 0px 0px;
      width: 560px; 
      height: 315px; /*Matches width and height of iframe but made transparent*/
    } 
   .close {
      color: #aaa;
      float: right;
      font-size: 18px;
      color: #FFFFE0;
    }
    .close:hover, .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

	</style>      
  
  
<body>
    <!--trigger modal--> 
            <a class="dropdownlink" onclick="document.getElementById('id01').style.display='block'" >Coming Down From Rising Fawn</a>
              <!--modal-->
              <div id="id01" class="w3-modal w3-animate-opacity">
                <!--modal content-->
                <div class="modal-content">
                  <span onclick="document.getElementById('id01').style.display='none'; stopVideo(modalA)" class="close">&times;</span>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/NCHEpoob-pE" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
                  </iframe>
                </div>
              </div>
          
    <br/>
    <br/>
    
            <!--trigger modal--> 
            <a class="dropdownlink" onclick="document.getElementById('id02').style.display='block'">Give Me Back My 15 Cents</a>
              <!--modal-->
              <div id="id02" class="w3-modal w3-animate-opacity">
                <!--modal content-->
                <div class="modal-content">
                  <span onclick="document.getElementById('id02').style.display='none'; stopVideo(modalB)"" class="close">&times;</span>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/0VMvU7NYWd0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
	              </iframe>	
                </div>
              </div>
    <script>
        
  function stopVideo(modal) {
  var currentIframe = modal.querySelector('.modal-content > iframe');
  currentIframe.src = currentIframe.src;
}      
        
/*Get modal*/
    var modalA = document.getElementById('id01');

    var modalB = document.getElementById('id02');
    
    /*Close on clicking outside modal*/
window.onclick = function(event) {
  
    if (event.target == modalA) {
        modalA.style.display = "none"; stopVideo(modalA);
    } 
    if(event.target == modalB) {
        modalB.style.display = "none"; stopVideo(modalB);      
     }
}


    </script>
    
</body>
    
</html>

randelldawson · 2018-02-23 00:05:10 UTC

In case you add more modals, then you could use the following function where you do not have to hard code each modal in the JavaScript.

window.onclick = function(event) {
    var target = event.target;
    if (target.classList.contains('w3-modal')) {
        target.style.display = "none";
        stopVideo(target);
    } 
}

and you would not have to use the following either:

    var modalA = document.getElementById('id01');

    var modalB = document.getElementById('id02');