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

AlexG · February 20, 2018, 9:59pm

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>

AlexG · February 21, 2018, 6:13pm

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

AlexG · February 21, 2018, 6:55pm

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/

AlexG · February 22, 2018, 5:29pm

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>

camperextraordinaire · February 23, 2018, 12:05am

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

HallmarkFunnels · May 13, 2020, 9:22pm

Hi all,

I’ve been trying to resolve this issue for myself as well. Being very new to html coding, I can’t seem to figure it out. I’ve been on many forums looking for a solution and I have also followed @camperextraordinaire instructions. I’m obviously not doing something right. Can someone please help me.

I need the iframe to stop playing content once the modal is closed. Here’s the code that i’ve been working on. Thanks in advance.

https://www.w3schools.com/code/tryit.asp?filename=GERIWDR4AWHL